fix: proper expando toggling

Author: JoshuaKGoldberg

static/app/views/explore/logs/styles.tsx

@@ -140,13 +140,10 @@ export const LogTableBody = styled(TableBody)<{
     padding-top: ${space(1)};
     padding-bottom: ${space(1)};
     `}
-  ${p =>
-    p.expanded
-      ? ``
-      : `
-    overflow-y: scroll;
-    max-height: 70vh;
-    min-height: 5rem;`}
+  overflow-y: scroll;
+  max-height: ${p =>
+    p.expanded ? `calc(100vh - ${GRID_BODY_ROW_HEIGHT * 1.5}px)` : '50vh'};
+  min-height: 5rem;
 `;
 
 export const LogDetailTableBodyCell = styled(TableBodyCell)`
@@ -303,6 +300,7 @@ export const LogsItemContainer = styled('div')`
   flex: 1 1 auto;
   margin-top: ${p => p.theme.space.md};
   margin-bottom: ${p => p.theme.space.md};
+  position: relative;
 `;
 
 export const LogsTableActionsContainer = styled(LogsItemContainer)`

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -102,7 +102,6 @@ type LogsTableProps = {
 const {info, fmt} = Sentry.logger;
 
 const LOGS_GRID_SCROLL_PIXEL_REVERSE_THRESHOLD = LOGS_GRID_BODY_ROW_HEIGHT * 2; // If you are less than this number of pixels from the top of the table while scrolling backward, fetch the previous page.
-const LOGS_OVERSCAN_AMOUNT = 50; // How many items to render beyond the visible area.
 
 export function LogsInfiniteTable({
   embedded = false,
@@ -253,10 +252,14 @@ export function LogsInfiniteTable({
     return terms;
   }, [search, localOnlyItemFilters?.filterText]);
 
-  const virtualizer = useVirtualizer({
+  const {expanded, expando} = useExpandoButton(() => {
+    virtualizer.measure();
+  });
+
+  const virtualizer = useVirtualizer<HTMLElement, Element>({
     count: data?.length ?? 0,
     estimateSize,
-    overscan: LOGS_OVERSCAN_AMOUNT,
+    overscan: expanded ? 25 : 10,
     getScrollElement: () => tableBodyRef?.current,
     getItemKey: (index: number) => data?.[index]?.[OurLogKnownFieldKey.ID] ?? index,
   });
@@ -415,10 +418,6 @@ export function LogsInfiniteTable({
     };
   }, []);
 
-  const {expanded, expando} = useExpandoButton(() => {
-    virtualizer.measure();
-  });
-
   // For replay context, render empty states outside the table for proper centering
   if (hasReplay && (isPending || isError || isEmpty)) {
     return (
@@ -442,6 +441,7 @@ export function LogsInfiniteTable({
 
   return (
     <Fragment>
+      {expando}
       <Table
         ref={tableRef}
         style={initialTableStyles}
@@ -459,7 +459,6 @@ export function LogsInfiniteTable({
             onResizeMouseDown={onResizeMouseDown}
           />
         )}
-        <div style={{position: 'absolute', top: 8, right: 8}}>{expando}</div>
         <LogTableBody
           showHeader={!embedded}
           ref={tableBodyRef}
@@ -532,24 +531,26 @@ export function LogsInfiniteTable({
           )}
         </LogTableBody>
       </Table>
-      <FloatingBackToTopContainer
-        inReplay={!!embeddedOptions?.replay}
-        tableLeft={tableRef.current?.getBoundingClientRect().left ?? 0}
-        tableWidth={tableRef.current?.getBoundingClientRect().width ?? 0}
-      >
-        {!embeddedOptions?.replay && (
-          <BackToTopButton
-            virtualizer={virtualizer}
-            hidden={
-              isPending || ((firstItemIndex ?? 0) === 0 && (scrollOffset ?? 0) < 550)
-            }
-            setIsFunctionScrolling={setIsFunctionScrolling}
-          />
-        )}
-        {embeddedOptions?.replay && showJumpUpButton ? (
-          <JumpButtons jump="up" onClick={onClickToJump} tableHeaderHeight={0} />
-        ) : null}
-      </FloatingBackToTopContainer>
+      {expanded && (
+        <FloatingBackToTopContainer
+          inReplay={!!embeddedOptions?.replay}
+          tableLeft={tableRef.current?.getBoundingClientRect().left ?? 0}
+          tableWidth={tableRef.current?.getBoundingClientRect().width ?? 0}
+        >
+          {!embeddedOptions?.replay && (
+            <BackToTopButton
+              virtualizer={virtualizer}
+              hidden={
+                isPending || ((firstItemIndex ?? 0) === 0 && (scrollOffset ?? 0) < 550)
+              }
+              setIsFunctionScrolling={setIsFunctionScrolling}
+            />
+          )}
+          {embeddedOptions?.replay && showJumpUpButton ? (
+            <JumpButtons jump="up" onClick={onClickToJump} tableHeaderHeight={0} />
+          ) : null}
+        </FloatingBackToTopContainer>
+      )}
       <FloatingBottomContainer
         tableWidth={tableRef.current?.getBoundingClientRect().width ?? 0}
       >
@@ -768,10 +769,7 @@ function BackToTopButton({
 }: {
   hidden: boolean;
   setIsFunctionScrolling: (isScrolling: boolean) => void;
-  virtualizer:
-    | Virtualizer<HTMLTableSectionElement, Element>
-    | Virtualizer<HTMLElement, Element>
-    | Virtualizer<Window, Element>;
+  virtualizer: Virtualizer<HTMLElement, Element> | Virtualizer<Window, Element>;
 }) {
   if (hidden) {
     return null;

static/app/views/explore/logs/tables/useExpandoButton.tsx

@@ -1,4 +1,5 @@
-import {useState} from 'react';
+import {useLayoutEffect, useRef, useState} from 'react';
+import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
 
@@ -8,29 +9,53 @@ import {TableActionButton} from 'sentry/views/explore/components/tableActionButt
 
 export function useExpandoButton(onToggle: () => void) {
   const [expanded, setExpanded] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
 
   const [Icon, text] = expanded
-    ? [IconContract, t('Collapse Table')]
-    : [IconExpand, t('Expand Table')];
+    ? [IconContract, t('Collapse')]
+    : [IconExpand, t('Expand')];
 
   const toggleExpanded = () => {
     setExpanded(!expanded);
     onToggle();
   };
 
+  useLayoutEffect(() => {
+    if (expanded) {
+      ref.current?.scrollIntoView({
+        block: 'start',
+      });
+    }
+  }, [expanded]);
+
+  const buttonProps = {
+    'aria-label': text,
+    icon: <Icon />,
+    onClick: toggleExpanded,
+    ref,
+    size: 'sm',
+  } as const;
+
   return {
     expanded,
     expando: (
-      <TableActionButton
-        mobile={
-          <Button onClick={toggleExpanded} icon={<Icon />} size="sm" aria-label={text} />
-        }
-        desktop={
-          <Button onClick={toggleExpanded} icon={<Icon />} size="sm" aria-label={text}>
-            {text}
-          </Button>
-        }
-      />
+      <ExpandoContainer>
+        <TableActionButton
+          mobile={<ExpandoButton {...buttonProps} />}
+          desktop={<ExpandoButton {...buttonProps}>{text}</ExpandoButton>}
+        />
+      </ExpandoContainer>
     ),
   };
 }
+
+const ExpandoButton = styled(Button)`
+  scroll-margin-top: 0.75rem;
+`;
+
+const ExpandoContainer = styled('div')`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+`;

static/app/views/replays/detail/ourlogs/index.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useRef} from 'react';
+import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import Placeholder from 'sentry/components/placeholder';