ref(profiling): extract shared LayoutPageWithHiddenFooter

Deduplicate the identical styled component from four profiling files
into a single export in profiling/utils.tsx.

Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

Author: priscilawebdev

static/app/views/profiling/continuousProfileProvider.tsx

@@ -1,8 +1,6 @@
 import {useMemo, useState} from 'react';
 import {Outlet} from 'react-router-dom';
-import styled from '@emotion/styled';
 
-import * as Layout from 'sentry/components/layouts/thirds';
 import {ContinuousProfileHeader} from 'sentry/components/profiling/continuousProfileHeader';
 import type {RequestState} from 'sentry/types/core';
 import type {EventTransaction} from 'sentry/types/event';
@@ -11,6 +9,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
+import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/utils';
 
 import {ContinuousProfileProvider, ProfileTransactionContext} from './profilesProvider';
 
@@ -79,9 +78,3 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
     </ContinuousProfileProvider>
   );
 }
-
-const LayoutPageWithHiddenFooter = styled(Layout.Page)`
-  ~ footer {
-    display: none;
-  }
-`;

static/app/views/profiling/differentialFlamegraph.tsx

@@ -6,7 +6,6 @@ import {vec2} from 'gl-matrix';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import Feature from 'sentry/components/acl/feature';
-import * as Layout from 'sentry/components/layouts/thirds';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {DifferentialFlamegraphLayout} from 'sentry/components/profiling/flamegraph/differentialFlamegraphLayout';
 import {FlamegraphContextMenu} from 'sentry/components/profiling/flamegraph/flamegraphContextMenu';
@@ -42,6 +41,7 @@ import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegra
 import {Rect} from 'sentry/utils/profiling/speedscope';
 import {useLocation} from 'sentry/utils/useLocation';
 import {LOADING_PROFILE_GROUP} from 'sentry/views/profiling/profileGroupProvider';
+import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/utils';
 
 const PROFILE_TYPE = 'differential aggregate flamegraph' as const;
 
@@ -351,12 +351,6 @@ const DifferentialFlamegraphContainer = styled('div')`
   flex: 1;
 `;
 
-const LayoutPageWithHiddenFooter = styled(Layout.Page)`
-  ~ footer {
-    display: none;
-  }
-`;
-
 function DifferentialFlamegraphWithProviders() {
   return (
     <LayoutPageWithHiddenFooter>

static/app/views/profiling/profileSummary/index.tsx

@@ -69,6 +69,7 @@ import {
 import {ProfilesSummaryChart} from 'sentry/views/profiling/landing/profilesSummaryChart';
 import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
 import {ProfilesTable} from 'sentry/views/profiling/profileSummary/profilesTable';
+import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/utils';
 
 import {MostRegressedProfileFunctions} from './regressedProfileFunctions';
 import {SlowestProfileFunctions} from './slowestProfileFunctions';
@@ -632,12 +633,6 @@ const ProfileVisualizationContainer = styled('div')<{hideRegressions}>`
   flex: 1 1 100%;
 `;
 
-const LayoutPageWithHiddenFooter = styled(Layout.Page)`
-  ~ footer {
-    display: none;
-  }
-`;
-
 const ProfileSummaryContainer = styled('div')`
   display: flex;
   flex-direction: column;

static/app/views/profiling/transactionProfileProvider.tsx

@@ -1,15 +1,14 @@
 import {useState} from 'react';
 import {Outlet} from 'react-router-dom';
-import styled from '@emotion/styled';
 
-import * as Layout from 'sentry/components/layouts/thirds';
 import {ProfileHeader} from 'sentry/components/profiling/profileHeader';
 import type {RequestState} from 'sentry/types/core';
 import type {EventTransaction} from 'sentry/types/event';
 import {isSchema, isSentrySampledProfile} from 'sentry/utils/profiling/guards/profile';
 import {useSentryEvent} from 'sentry/utils/profiling/hooks/useSentryEvent';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
+import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/utils';
 
 import {ProfileTransactionContext, TransactionProfileProvider} from './profilesProvider';
 
@@ -62,9 +61,3 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
     </TransactionProfileProvider>
   );
 }
-
-const LayoutPageWithHiddenFooter = styled(Layout.Page)`
-  ~ footer {
-    display: none;
-  }
-`;

static/app/views/profiling/utils.tsx

@@ -1,8 +1,20 @@
+import styled from '@emotion/styled';
+
+import * as Layout from 'sentry/components/layouts/thirds';
 import {
   isContinuousProfileReference,
   isTransactionProfileReference,
 } from 'sentry/utils/profiling/guards/profile';
 
+// The footer component is a sibling of this div.
+// Remove it so the flamegraph can take up the
+// entire screen.
+export const LayoutPageWithHiddenFooter = styled(Layout.Page)`
+  ~ footer {
+    display: none;
+  }
+`;
+
 export function requestAnimationFrameTimeout(cb: () => void, timeout: number) {
   const rafId = {current: 0};
   const start = performance.now();