feat: also hide footer when expanded

JoshuaKGoldberg · JoshuaKGoldberg · commit 9bd2a9ad8b35 · 2026-04-07T11:33:37.000-04:00
diff --git a/static/app/views/explore/components/viewportConstrainedPage.tsx b/static/app/views/explore/components/viewportConstrainedPage.tsx
@@ -7,6 +7,7 @@ import {SHORT_VIEWPORT_HEIGHT} from 'sentry/utils/useIsShortViewport';
 
 interface ViewportConstrainedPageProps extends FlexProps<'main'> {
   constrained?: boolean;
+  hideFooter?: boolean;
 }
 
 /**
@@ -17,18 +18,26 @@ interface ViewportConstrainedPageProps extends FlexProps<'main'> {
  * (TopBar, Footer, etc.), and content within must manage its own
  * overflow (e.g. via scrollable table bodies).
  *
- * When constrained, the footer is also hidden at smaller viewport heights.
- * Similar to mobile, this is to leave more height space for essential UI.
+ * When constrained, the global footer sibling is hidden on smaller
+ * viewport heights and when `hideFooter` is set.
  */
 export function ViewportConstrainedPage({
   constrained = true,
-  ...props
+  hideFooter,
+  ...rest
 }: ViewportConstrainedPageProps) {
   if (!constrained) {
-    return <Layout.Page {...props} />;
+    return <Layout.Page {...rest} />;
   }
 
-  return <ConstrainedPage minHeight="0" overflow="hidden" {...props} />;
+  return (
+    <ConstrainedPage
+      minHeight="0"
+      overflow="hidden"
+      data-hide-footer={hideFooter ? '' : undefined}
+      {...rest}
+    />
+  );
 }
 
 const ConstrainedPage = styled(Layout.Page)`
@@ -39,4 +48,8 @@ const ConstrainedPage = styled(Layout.Page)`
       display: none;
     }
   }
+
+  &[data-hide-footer] ~ footer {
+    display: none;
+  }
 `;
diff --git a/static/app/views/explore/logs/content.tsx b/static/app/views/explore/logs/content.tsx
@@ -26,7 +26,7 @@ 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 {useLogsTableExpandoFeatureFlag} from 'sentry/views/explore/logs/tables/useTableExpando';
+import {useTableExpando} from 'sentry/views/explore/logs/tables/useTableExpando';
 import {
   useQueryParamsId,
   useQueryParamsTitle,
@@ -36,7 +36,7 @@ import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnbo
 
 export default function LogsContent() {
   const organization = useOrganization();
-  const hasExpando = useLogsTableExpandoFeatureFlag();
+  const tableExpando = useTableExpando();
   const maxPickableDays = useMaxPickableDays({
     dataCategories: [DataCategory.LOG_BYTE],
   });
@@ -66,7 +66,10 @@ export default function LogsContent() {
             analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
             source="location"
           >
-            <ViewportConstrainedPage constrained={hasExpando}>
+            <ViewportConstrainedPage
+              constrained={tableExpando.enabled}
+              hideFooter={tableExpando.expanded === true}
+            >
               <LogsHeader />
               <LogsPageDataProvider allowHighFidelity>
                 {defined(onboardingProject) ? (
@@ -76,7 +79,10 @@ export default function LogsContent() {
                     datePageFilterProps={datePageFilterProps}
                   />
                 ) : (
-                  <LogsTabContent datePageFilterProps={datePageFilterProps} />
+                  <LogsTabContent
+                    datePageFilterProps={datePageFilterProps}
+                    tableExpando={tableExpando}
+                  />
                 )}
               </LogsPageDataProvider>
             </ViewportConstrainedPage>
diff --git a/static/app/views/explore/logs/logsTab.spec.tsx b/static/app/views/explore/logs/logsTab.spec.tsx
@@ -16,8 +16,23 @@ import {LOGS_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
 import {AlwaysPresentLogFields} from 'sentry/views/explore/logs/constants';
 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 {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 
+function LogsTabContentHarness({
+  datePageFilterProps,
+}: {
+  datePageFilterProps: DatePageFilterProps;
+}) {
+  const tableExpando = useTableExpando();
+  return (
+    <LogsTabContent
+      datePageFilterProps={datePageFilterProps}
+      tableExpando={tableExpando}
+    />
+  );
+}
+
 const datePageFilterProps: DatePageFilterProps = {
   defaultPeriod: '7d' as const,
   maxPickableDays: 7,
@@ -178,7 +193,7 @@ describe('LogsTabContent', () => {
   it('should call APIs as expected', async () => {
     render(
       <ProviderWrapper>
-        <LogsTabContent datePageFilterProps={datePageFilterProps} />
+        <LogsTabContentHarness datePageFilterProps={datePageFilterProps} />
       </ProviderWrapper>,
       {initialRouterConfig, organization}
     );
@@ -230,7 +245,7 @@ describe('LogsTabContent', () => {
   it('should switch between modes', async () => {
     render(
       <ProviderWrapper>
-        <LogsTabContent datePageFilterProps={datePageFilterProps} />
+        <LogsTabContentHarness datePageFilterProps={datePageFilterProps} />
       </ProviderWrapper>,
       {initialRouterConfig, organization}
     );
@@ -274,7 +289,7 @@ describe('LogsTabContent', () => {
   it('should pass caseInsensitive to the query', async () => {
     render(
       <ProviderWrapper>
-        <LogsTabContent datePageFilterProps={datePageFilterProps} />
+        <LogsTabContentHarness datePageFilterProps={datePageFilterProps} />
       </ProviderWrapper>,
       {initialRouterConfig, organization}
     );
@@ -331,7 +346,7 @@ describe('LogsTabContent', () => {
     autorefreshEnabledRouterConfig.location.query[LOGS_AUTO_REFRESH_KEY] = 'enabled';
     render(
       <ProviderWrapper>
-        <LogsTabContent datePageFilterProps={datePageFilterProps} />
+        <LogsTabContentHarness datePageFilterProps={datePageFilterProps} />
       </ProviderWrapper>,
       {
         initialRouterConfig: autorefreshEnabledRouterConfig,
diff --git a/static/app/views/explore/logs/logsTab.tsx b/static/app/views/explore/logs/logsTab.tsx
@@ -96,10 +96,11 @@ import {useRawCounts} from 'sentry/views/explore/useRawCounts';
 // eslint-disable-next-line boundaries/dependencies
 import QuotaExceededAlert from 'getsentry/components/performance/quotaExceededAlert';
 
-import {useTableExpando} from './tables/useTableExpando';
+import type {TableExpando} from './tables/useTableExpando';
 
 type LogsTabProps = {
   datePageFilterProps: DatePageFilterProps;
+  tableExpando: TableExpando;
 };
 
 interface LogsSearchBarProps {
@@ -240,7 +241,7 @@ const LogsSearchSection = memo(function LogsSearchSection({
   );
 });
 
-export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
+export function LogsTabContent({datePageFilterProps, tableExpando}: LogsTabProps) {
   const pageFilters = usePageFilters();
   const fields = useQueryParamsFields();
   const mode = useQueryParamsMode();
@@ -425,7 +426,6 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
   }, [pageFilters.selection.datetime]);
 
   const {infiniteLogsQueryResult} = useLogsPageData();
-  const expando = useTableExpando();
 
   return (
     <Fragment>
@@ -438,7 +438,7 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
           {sidebarOpen ? <LogsToolbar /> : null}
         </LogsControlSection>
         <ExploreContentSection gap="md">
-          {!expando.expanded && (
+          {!tableExpando.expanded && (
             <OverChartButtonGroup>
               <LogsSidebarCollapseButton
                 sidebarOpen={sidebarOpen}
@@ -467,7 +467,7 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
             timeseriesResult={timeseriesResult}
             tableResult={infiniteLogsQueryResult}
           />
-          {!expando.expanded && (
+          {!tableExpando.expanded && (
             <LogsGraphContainer>
               <LogsGraph
                 rawLogCounts={rawLogCounts}
@@ -518,14 +518,14 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
                     </Button>
                   }
                 />
-                {expando.enabled && expando.button}
+                {tableExpando.enabled && tableExpando.button}
               </TableActionsContainer>
             )}
           </LogsTableActionsContainer>
           <LogsItemContainer>
             {tableTab === 'logs' ? (
               <LogsInfiniteTable
-                expanded={expando.expanded}
+                expanded={tableExpando.expanded}
                 booleanAttributes={booleanAttributes}
                 stringAttributes={stringAttributes}
                 numberAttributes={numberAttributes}
diff --git a/static/app/views/explore/logs/tables/useTableExpando.tsx b/static/app/views/explore/logs/tables/useTableExpando.tsx
@@ -9,24 +9,18 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {TableActionButton} from 'sentry/views/explore/components/tableActionButton';
 
-interface TableExpando {
+export interface TableExpando {
   button: React.ReactNode;
   enabled: boolean;
   expanded: boolean | undefined;
 }
 
-export function useLogsTableExpandoFeatureFlag() {
+export function useTableExpando(): TableExpando {
   const organization = useOrganization();
   const location = useLocation();
-
-  return (
+  const enabled =
     organization.features.includes('ourlogs-table-expando') ||
-    location.query.logsTableExpando === 'true'
-  );
-}
-
-export function useTableExpando(): TableExpando {
-  const enabled = useLogsTableExpandoFeatureFlag();
+    location.query.logsTableExpando === 'true';
   const [expandedState, setExpandedState] = useState(false);
 
   const [Icon, text] = expandedState
