feat(logs): moved LogsInfiniteTable inline with expand/contract button

static/app/components/events/ourlogs/ourlogsDrawer.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef} from 'react';
+import {useMemo} from 'react';
 import moment from 'moment-timezone';
 
 import {ProjectAvatar} from '@sentry/scraps/avatar';
@@ -83,7 +83,6 @@ export function OurlogsDrawer({
   const searchQueryBuilderProps = useTraceItemSearchQueryBuilderProps(
     tracesItemSearchQueryBuilderProps
   );
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const additionalData = useMemo(
     () => ({
@@ -156,12 +155,12 @@ export function OurlogsDrawer({
             )}
           </Flex>
         </EventNavigator>
-        <EventDrawerBody ref={containerRef}>
-          <Stack gap="xl">
+        <EventDrawerBody>
+          <Stack position="relative">
             <LogsInfiniteTable
               embedded
-              scrollContainer={containerRef}
               embeddedOptions={embeddedOptions}
+              expanded
               additionalData={additionalData}
             />
           </Stack>

static/app/components/events/ourlogs/ourlogsSection.spec.tsx

@@ -43,6 +43,7 @@ jest.mock('@tanstack/react-virtual', () => {
         {key: '3', index: 2, start: 100, end: 150, lane: 0},
       ]),
       getTotalSize: jest.fn().mockReturnValue(150),
+      measure: jest.fn(),
       scrollToIndex: jest.fn(),
       options: {
         scrollMargin: 0,

static/app/components/panels/panelBody.tsx

@@ -3,10 +3,12 @@ import styled from '@emotion/styled';
 import {textStyles} from 'sentry/styles/text';
 
 type BaseProps = {
+  display?: 'contents';
   withPadding?: boolean;
 };
 
 export const PanelBody = styled('div')<BaseProps>`
+  ${p => p.display && `display: ${p.display};`}
   padding: ${p => (p.withPadding ? p.theme.space.xl : undefined)};
   ${textStyles};
 `;

static/app/components/tables/gridEditable/styles.tsx

@@ -47,14 +47,16 @@ export const HeaderButtonContainer = styled('div')`
 export const Body = styled(
   ({
     children,
+    contentsBody,
     showVerticalScrollbar: _,
     ...props
   }: React.ComponentProps<typeof Panel> & {
     children?: React.ReactNode;
+    contentsBody?: boolean;
     showVerticalScrollbar?: boolean;
   }) => (
     <Panel {...props}>
-      <StyledPanelBody>{children}</StyledPanelBody>
+      <PanelBody display={contentsBody ? 'contents' : undefined}>{children}</PanelBody>
     </Panel>
   )
 )`
@@ -98,6 +100,8 @@ export const Grid = styled('table')<{
       ? css`
           height: 100%;
           max-height: ${typeof p.height === 'number' ? p.height + 'px' : p.height};
+          flex: 1;
+          min-height: 0;
 
           &:has(> thead + tbody) {
             grid-template-rows: auto 1fr;
@@ -336,7 +340,3 @@ export const GridResizer = styled('div')<{dataRows: number}>`
     opacity: 0.4;
   }
 `;
-
-const StyledPanelBody = styled(PanelBody)`
-  height: 100%;
-`;

static/app/utils/fixtures/virtualization.ts

@@ -0,0 +1,18 @@
+/**
+ * Tanstack Virtual renders zero items in the default zero-sized JSDom environment.
+ * This forces all elements to have a non-zero size to render at least a few rows.
+ * https://github.com/TanStack/virtual/issues/641
+ */
+export function mockGetBoundingClientRect() {
+  Element.prototype.getBoundingClientRect = jest.fn(() => ({
+    width: 500,
+    height: 500,
+    top: 0,
+    left: 0,
+    bottom: 500,
+    right: 500,
+    x: 0,
+    y: 0,
+    toJSON: () => {},
+  }));
+}

static/app/utils/useIsShortViewport.tsx

@@ -0,0 +1,7 @@
+import {useMedia} from 'sentry/utils/useMedia';
+
+export const SHORT_VIEWPORT_HEIGHT = 900;
+
+export function useIsShortViewport(): boolean {
+  return useMedia(`(max-height: ${SHORT_VIEWPORT_HEIGHT}px)`);
+}

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -35,6 +35,7 @@ import {defined, escape} from 'sentry/utils';
 import {uniq} from 'sentry/utils/array/uniq';
 import type {AggregationOutputType} from 'sentry/utils/discover/fields';
 import {RangeMap, type Range} from 'sentry/utils/number/rangeMap';
+import {useIsShortViewport} from 'sentry/utils/useIsShortViewport';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useWidgetSyncContext} from 'sentry/views/dashboards/contexts/widgetSyncContext';
@@ -134,6 +135,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   // have the same difference in `timestamp`s) even though this is rare, since
   // the backend zerofills the data
 
+  const isShortViewport = useIsShortViewport();
   const chartRef = useRef<ReactEchartsRef | null>(null);
   const unregisterRef = useRef<(() => void) | null>(null);
   const {register: registerWithWidgetSyncContext, groupName} = useWidgetSyncContext();
@@ -245,8 +247,11 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
 
   const axisRangeProp = getAxisRange(props.axisRange) ?? 'auto';
 
+  const yAxisSplitNumber = isShortViewport ? 2 : 5;
+
   const leftYAxis = TimeSeriesWidgetYAxis(
     {
+      splitNumber: yAxisSplitNumber,
       axisLabel: {
         formatter: (value: number) =>
           formatYAxisValue(value, leftYAxisType, unitForType[leftYAxisType] ?? undefined),
@@ -260,6 +265,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   const rightYAxis = rightYAxisType
     ? TimeSeriesWidgetYAxis(
         {
+          splitNumber: yAxisSplitNumber,
           axisLabel: {
             formatter: (value: number) =>
               formatYAxisValue(

static/app/views/explore/components/overChartButtonGroup.tsx

@@ -4,7 +4,6 @@ export function OverChartButtonGroup(props: FlexProps<'div'>) {
   return (
     <Flex
       justify={props.justify ? props.justify : {sm: 'end', md: 'between'}}
-      marginBottom="md"
       gap="xs"
       {...props}
     />

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

@@ -1,7 +1,7 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Container, type ContainerProps} from '@sentry/scraps/layout';
+import {Flex, type FlexProps} from '@sentry/scraps/layout';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import {SchemaHintsSection} from 'sentry/views/explore/components/schemaHints/schemaHintsList';
@@ -30,14 +30,16 @@ export const ExploreControlSection = styled('aside')<{expanded: boolean}>`
   }
 `;
 
-export function ExploreContentSection(props: ContainerProps) {
+export function ExploreContentSection(props: FlexProps<'div'>) {
   const hasPageFrame = useHasPageFrameFeature();
   return (
-    <Container
+    <Flex
       {...props}
       background={hasPageFrame ? 'primary' : 'secondary'}
       flex="1 1 auto"
+      minHeight="0"
       minWidth="0"
+      direction="column"
       padding="xl"
     />
   );

static/app/views/explore/components/table.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import {useCallback, useEffect, useMemo, useRef} from 'react';
+import {useCallback, useEffect, useMemo, useRef, type CSSProperties} from 'react';
 import styled from '@emotion/styled';
 
 import {COL_WIDTH_MINIMUM} from 'sentry/components/tables/gridEditable';
@@ -18,16 +18,17 @@ import {defined} from 'sentry/utils';
 import {Actions} from 'sentry/views/discover/table/cellAction';
 
 interface TableProps extends React.ComponentProps<typeof _TableWrapper> {
+  height?: CSSProperties['height'];
   ref?: React.Ref<HTMLTableElement>;
   showVerticalScrollbar?: boolean;
   // Size of the loading element in order to match the height of the row.
   size?: number;
 }
 
-export function Table({ref, children, style, ...props}: TableProps) {
+export function Table({ref, children, height, style, ...props}: TableProps) {
   return (
     <_TableWrapper {...props}>
-      <_Table ref={ref} style={style}>
+      <_Table ref={ref} height={height} style={style}>
         {children}
       </_Table>
     </_TableWrapper>

static/app/views/explore/components/viewportConstrainedPage.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import type {FlexProps} from '@sentry/scraps/layout';
+
+import * as Layout from 'sentry/components/layouts/thirds';
+import {SHORT_VIEWPORT_HEIGHT} from 'sentry/utils/useIsShortViewport';
+
+interface ViewportConstrainedPageProps extends FlexProps<'main'> {
+  constrained?: boolean;
+  hideFooter?: boolean;
+}
+
+/**
+ * A page layout that constrains itself to the viewport height to prevent
+ * window-level scrolling. Uses CSS size containment so that the page's
+ * intrinsic size doesn't bubble up through the flex chain — the flex
+ * algorithm sizes it to exactly the remaining space after siblings
+ * (TopBar, Footer, etc.), and content within must manage its own
+ * overflow (e.g. via scrollable table bodies).
+ *
+ * When constrained, the global footer sibling is hidden on smaller
+ * viewport heights and when `hideFooter` is set.
+ */
+export function ViewportConstrainedPage({
+  constrained = true,
+  hideFooter,
+  ...rest
+}: ViewportConstrainedPageProps) {
+  if (!constrained) {
+    return <Layout.Page {...rest} />;
+  }
+
+  return (
+    <ConstrainedPage
+      minHeight="0"
+      overflow="hidden"
+      data-hide-footer={hideFooter ? '' : undefined}
+      {...rest}
+    />
+  );
+}
+
+const ConstrainedPage = styled(Layout.Page)`
+  contain: size;
+
+  @media (max-height: ${SHORT_VIEWPORT_HEIGHT}px) {
+    ~ footer {
+      display: none;
+    }
+  }
+
+  &[data-hide-footer] ~ footer {
+    display: none;
+  }
+`;

static/app/views/explore/logs/content.spec.tsx

@@ -16,11 +16,14 @@ import {ProjectsStore} from 'sentry/stores/projectsStore';
 import {TeamStore} from 'sentry/stores/teamStore';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
+import {mockGetBoundingClientRect} from 'sentry/utils/fixtures/virtualization';
 import {LOGS_AUTO_REFRESH_KEY} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
 import type {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 
 import LogsPage from './content';
 
+beforeEach(mockGetBoundingClientRect);
+
 describe('LogsPage', () => {
   let organization: Organization;
   let project: Project;

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

@@ -1,5 +1,5 @@
 import {LinkButton} from '@sentry/scraps/button';
-import {Grid, Stack} from '@sentry/scraps/layout';
+import {Grid} from '@sentry/scraps/layout';
 
 import {AnalyticsArea} from 'sentry/components/analyticsArea';
 import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
@@ -20,11 +20,13 @@ import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useProjects} from 'sentry/utils/useProjects';
 import {ExploreBreadcrumb} from 'sentry/views/explore/components/breadcrumb';
+import {ViewportConstrainedPage} from 'sentry/views/explore/components/viewportConstrainedPage';
 import {LogsPageDataProvider} from 'sentry/views/explore/contexts/logs/logsPageData';
 import {useGetSavedQuery} from 'sentry/views/explore/hooks/useGetSavedQueries';
 import {LogsTabOnboarding} from 'sentry/views/explore/logs/logsOnboarding';
 import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import {LogsTabContent} from 'sentry/views/explore/logs/logsTab';
+import {useTableExpando} from 'sentry/views/explore/logs/tables/useTableExpando';
 import {
   useQueryParamsId,
   useQueryParamsTitle,
@@ -34,6 +36,7 @@ import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnbo
 
 export default function LogsContent() {
   const organization = useOrganization();
+  const tableExpando = useTableExpando();
   const maxPickableDays = useMaxPickableDays({
     dataCategories: [DataCategory.LOG_BYTE],
   });
@@ -63,7 +66,10 @@ export default function LogsContent() {
             analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
             source="location"
           >
-            <Stack flex={1}>
+            <ViewportConstrainedPage
+              constrained={tableExpando.enabled}
+              hideFooter={tableExpando.expanded === true}
+            >
               <LogsHeader />
               <LogsPageDataProvider allowHighFidelity>
                 {defined(onboardingProject) ? (
@@ -73,10 +79,13 @@ export default function LogsContent() {
                     datePageFilterProps={datePageFilterProps}
                   />
                 ) : (
-                  <LogsTabContent datePageFilterProps={datePageFilterProps} />
+                  <LogsTabContent
+                    datePageFilterProps={datePageFilterProps}
+                    tableExpando={tableExpando}
+                  />
                 )}
               </LogsPageDataProvider>
-            </Stack>
+            </ViewportConstrainedPage>
           </LogsQueryParamsProvider>
         </AnalyticsArea>
       </PageFiltersContainer>

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

@@ -15,6 +15,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {EventView} from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useChartInterval} from 'sentry/utils/useChartInterval';
+import {useIsShortViewport} from 'sentry/utils/useIsShortViewport';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useProjects} from 'sentry/utils/useProjects';
@@ -118,6 +119,7 @@ function Graph({
   timeseriesResult,
   visualize,
 }: GraphProps) {
+  const isShortViewport = useIsShortViewport();
   const {isEmpty: tableIsEmpty, isPending: tableIsPending} = useLogsPageDataQueryResult();
 
   const aggregate = visualize.yAxis;
@@ -235,7 +237,7 @@ function Graph({
           />
         )
       }
-      height={visualize.visible ? 200 : 50}
+      height={visualize.visible ? (isShortViewport ? 175 : 200) : 50}
       revealActions="always"
     />
   );