jasonyuezhang · jasonyuezhang · Oct 7, 2025 · Oct 7, 2025
diff --git a/static/app/routes.tsx b/static/app/routes.tsx
@@ -1973,6 +1973,7 @@ function buildRoutes(): RouteObject[] {
       children: [
         {
           index: true,
+          handle: {module: ModuleName.MOBILE_VITALS},
           component: make(
             () => import('sentry/views/insights/mobile/screens/views/screensLandingPage')
           ),
@@ -2064,9 +2065,11 @@ function buildRoutes(): RouteObject[] {
     },
     {
       path: `${MOBILE_LANDING_SUB_PATH}/`,
+      component: make(() => import('sentry/views/insights/pages/mobile/layout')),
       children: [
         {
           index: true,
+          handle: {module: undefined},
           component: make(
             () => import('sentry/views/insights/pages/mobile/mobileOverviewPage')
           ),

diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
@@ -28,16 +28,12 @@ import {
   isAValidSort,
 } from 'sentry/views/insights/http/components/tables/domainsTable';
 import {Referrer} from 'sentry/views/insights/http/referrers';
-import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
-import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
-import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
 import {ModuleName} from 'sentry/views/insights/types';
 
 export function HTTPLandingPage() {
   const organization = useOrganization();
   const navigate = useNavigate();
   const location = useLocation();
-  const {view} = useDomainViewFilters();
 
   const query = useLocationQuery({
     fields: {
@@ -95,14 +91,8 @@ export function HTTPLandingPage() {
     Referrer.LANDING_DOMAINS_LIST
   );
 
-  const headerProps = {
-    module: ModuleName.HTTP,
-  };
-
   return (
     <React.Fragment>
-      {view === MOBILE_LANDING_SUB_PATH && <MobileHeader {...headerProps} />}
-
       <ModuleFeature moduleName={ModuleName.HTTP}>
         <Layout.Body>
           <Layout.Main fullWidth>

diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx
@@ -1,3 +1,4 @@
+import {Fragment} from 'react';
 import type {Location} from 'history';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {PageFilterStateFixture} from 'sentry-fixture/pageFilters';
@@ -11,6 +12,8 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {MODULE_FEATURE} from 'sentry/views/insights/mobile/screens/settings';
 import ScreensLandingPage from 'sentry/views/insights/mobile/screens/views/screensLandingPage';
+import MobileLayout from 'sentry/views/insights/pages/mobile/layout';
+import {ModuleName} from 'sentry/views/insights/types';
 
 jest.mock('sentry/utils/usePageFilters');
 jest.mock('sentry/utils/useLocation');
@@ -80,7 +83,20 @@ describe('Screens Landing Page', () => {
     });
 
     it('shows the platform selector for hybrid sdks', async () => {
-      render(<ScreensLandingPage />, {organization, deprecatedRouterMocks: true});
+      render(<MobileLayout />, {
+        organization,
+        initialRouterConfig: {
+          location: {pathname: '/mobile-vitals'},
+          route: '/',
+          children: [
+            {
+              path: 'mobile-vitals',
+              handle: {module: ModuleName.MOBILE_VITALS},
+              element: <Fragment />,
+            },
+          ],
+        },
+      });
       expect(await screen.findByLabelText('Android')).toBeInTheDocument();
     });
 
@@ -217,7 +233,20 @@ describe('Screens Landing Page', () => {
 
     it('shows content if permission is there', async () => {
       organization.features = [MODULE_FEATURE];
-      render(<ScreensLandingPage />, {organization, deprecatedRouterMocks: true});
+      render(<MobileLayout />, {
+        organization,
+        initialRouterConfig: {
+          location: {pathname: '/mobile-vitals'},
+          route: '/',
+          children: [
+            {
+              path: 'mobile-vitals',
+              handle: {module: ModuleName.MOBILE_VITALS},
+              element: <ScreensLandingPage />,
+            },
+          ],
+        },
+      });
       expect(await screen.findAllByText('Mobile Vitals')).toHaveLength(2);
     });
   });

diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
@@ -7,7 +7,6 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import {TabbedCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
@@ -22,17 +21,11 @@ import {InsightsProjectSelector} from 'sentry/views/insights/common/components/p
 import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useMobileVitalsDrawer} from 'sentry/views/insights/common/utils/useMobileVitalsDrawer';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
-import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector';
 import {SETUP_CONTENT as TTFD_SETUP} from 'sentry/views/insights/mobile/screenload/data/setupContent';
 import {ScreensOverview} from 'sentry/views/insights/mobile/screens/components/screensOverview';
 import VitalCard from 'sentry/views/insights/mobile/screens/components/vitalCard';
 import {VitalDetailPanel} from 'sentry/views/insights/mobile/screens/components/vitalDetailPanel';
 import {Referrer} from 'sentry/views/insights/mobile/screens/referrers';
-import {
-  MODULE_DESCRIPTION,
-  MODULE_DOC_LINK,
-  MODULE_TITLE,
-} from 'sentry/views/insights/mobile/screens/settings';
 import {
   getColdAppStartPerformance,
   getDefaultMetricPerformance,
@@ -42,7 +35,6 @@ import {
   type VitalItem,
   type VitalStatus,
 } from 'sentry/views/insights/mobile/screens/utils';
-import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
 import {ModuleName} from 'sentry/views/insights/types';
 
 function ScreensLandingPage() {
@@ -254,19 +246,6 @@ function ScreensLandingPage() {
     <ModulePageProviders moduleName={ModuleName.MOBILE_VITALS}>
       <Layout.Page>
         <PageAlertProvider>
-          <MobileHeader
-            headerTitle={
-              <Fragment>
-                {MODULE_TITLE}
-                <PageHeadingQuestionTooltip
-                  docsUrl={MODULE_DOC_LINK}
-                  title={MODULE_DESCRIPTION}
-                />
-              </Fragment>
-            }
-            headerActions={isProjectCrossPlatform && <PlatformSelector />}
-            module={moduleName}
-          />
           <ModuleFeature moduleName={moduleName}>
             <Layout.Body>
               <Layout.Main fullWidth>

diff --git a/static/app/views/insights/pages/mobile/am1OverviewPage.tsx b/static/app/views/insights/pages/mobile/am1OverviewPage.tsx
@@ -29,9 +29,7 @@ import {useUserTeams} from 'sentry/utils/useUserTeams';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
-import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
 import {
-  MOBILE_LANDING_TITLE,
   MOBILE_PLATFORMS,
   OVERVIEW_PAGE_ALLOWED_OPS,
 } from 'sentry/views/insights/pages/mobile/settings';
@@ -200,7 +198,6 @@ export function Am1MobileOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <MobileHeader headerTitle={MOBILE_LANDING_TITLE} />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

diff --git a/static/app/views/insights/pages/mobile/layout.tsx b/static/app/views/insights/pages/mobile/layout.tsx
@@ -0,0 +1,52 @@
+import {Fragment} from 'react';
+import {Outlet, useMatches} from 'react-router-dom';
+
+import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
+import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
+import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector';
+import {
+  MODULE_DESCRIPTION,
+  MODULE_DOC_LINK,
+  MODULE_TITLE,
+} from 'sentry/views/insights/mobile/screens/settings';
+import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
+import {ModuleName} from 'sentry/views/insights/types';
+
+function MobileVitalsHeader() {
+  const {isProjectCrossPlatform} = useCrossPlatformProject();
+
+  return (
+    <MobileHeader
+      headerTitle={
+        <Fragment>
+          {MODULE_TITLE}
+          <PageHeadingQuestionTooltip
+            docsUrl={MODULE_DOC_LINK}
+            title={MODULE_DESCRIPTION}
+          />
+        </Fragment>
+      }
+      headerActions={isProjectCrossPlatform && <PlatformSelector />}
+      module={ModuleName.MOBILE_VITALS}
+    />
+  );
+}
+
+function MobileLayout() {
+  const handle = useMatches().at(-1)?.handle as {module?: ModuleName} | undefined;
+
+  return (
+    <Fragment>
+      {handle && 'module' in handle ? (
+        handle.module === ModuleName.MOBILE_VITALS ? (
+          <MobileVitalsHeader />
+        ) : (
+          <MobileHeader module={handle.module} />
+        )
+      ) : null}
+      <Outlet />
+    </Fragment>
+  );
+}
+
+export default MobileLayout;
diff --git a/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx b/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx
@@ -38,11 +38,9 @@ import {
   MobileOverviewTable,
   type ValidSort,
 } from 'sentry/views/insights/pages/mobile/mobileOverviewTable';
-import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
 import {Referrer} from 'sentry/views/insights/pages/mobile/referrers';
 import {
   DEFAULT_SORT,
-  MOBILE_LANDING_TITLE,
   OVERVIEW_PAGE_ALLOWED_OPS,
 } from 'sentry/views/insights/pages/mobile/settings';
 import {TransactionNameSearchBar} from 'sentry/views/insights/pages/transactionNameSearchBar';
@@ -216,7 +214,6 @@ function EAPMobileOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <MobileHeader headerTitle={MOBILE_LANDING_TITLE} />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

diff --git a/static/app/views/insights/sessions/views/overview.tsx b/static/app/views/insights/sessions/views/overview.tsx
@@ -12,7 +12,6 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
 import {ModulesOnboardingPanel} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
-import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
 import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
 import {
   useDomainViewFilters,
@@ -37,7 +36,6 @@ function SessionsOverview() {
 
   return (
     <Fragment>
-      <ViewSpecificHeader view={view} />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>
@@ -64,15 +62,6 @@ function SessionsOverview() {
   );
 }
 
-function ViewSpecificHeader({view}: {view: DomainView | ''}) {
-  switch (view) {
-    case MOBILE_LANDING_SUB_PATH:
-      return <MobileHeader module={ModuleName.SESSIONS} />;
-    default:
-      return null;
-  }
-}
-
 function ViewSpecificCharts({
   view,
   filters,