diff --git a/docs/release-control/v6/internal/subsystems/frontend-primitives.md b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
index 4bc6768d95..7dec6d8c41 100644
--- a/docs/release-control/v6/internal/subsystems/frontend-primitives.md
+++ b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
@@ -889,6 +889,14 @@ not a replacement status card, CTA band, or page-local nested card.
    an existing panel/card frame must use the shared `frame="flush"` mode rather
    than caller-local border overrides, horizontal-scroll wrappers, or negative
    margin compensation.
+   Dense platform tables must also preserve readable columns at phone widths.
+   `PlatformTableShell` owns the responsive minimum-width policy, preserves any
+   explicit base floor declared by the feature table, and otherwise applies
+   the shared platform minimum before breakpoint-specific widths take over.
+   Narrow viewports keep document-level overflow
+   contained by `Table` and scroll the table itself; feature tables must not
+   squeeze every declared column into the viewport, override the shared floor,
+   or add a second page-local scroll wrapper.
    Product-table subgroup/header rows must likewise consume the shared
    `frontend-modern/src/components/shared/groupedTableRowPresentation.ts`
    helper and `.grouped-table-row` CSS token contract instead of local
@@ -3443,6 +3451,11 @@ of pushing tab-order or DOM lifecycle logic back into the shared shell. With
 support/admin controls moved under Settings, that utility ordering must no longer
 reserve a standalone `operations` slot; alerts, Patrol, and Settings are the
 remaining authenticated utility tabs.
+The platform rail is the only horizontally scrolling region in that shell.
+Alerts, Patrol, and Settings stay pinned in a separate utility rail so primary
+platform breadth cannot push those global destinations beyond the phone
+viewport, while active-platform centering and fade state remain scoped to the
+primary rail.
 The shared command palette now follows that same owner split.
 `frontend-modern/src/components/shared/CommandPaletteModal.tsx` stays the
 render shell, `frontend-modern/src/components/shared/useCommandPaletteState.ts`
diff --git a/docs/release-control/v6/internal/subsystems/performance-and-scalability.md b/docs/release-control/v6/internal/subsystems/performance-and-scalability.md
index 2f001d9001..84cae18599 100644
--- a/docs/release-control/v6/internal/subsystems/performance-and-scalability.md
+++ b/docs/release-control/v6/internal/subsystems/performance-and-scalability.md
@@ -1492,6 +1492,11 @@ and viewport-sync plus selected-row reveal behavior now live in
 so future hot-path table-state changes must not fold selector derivation,
 layout policy, and scroll coordination back into one mixed owner or the render
 shell.
+The same shared layout policy now preserves a 640-pixel mobile table floor for
+the prioritized identity and metric columns. That width remains class-based
+and contained by the frontend-primitives `Table` overflow shell, so phone
+layouts gain legible tracks without reintroducing document-level overflow,
+inline sizing maps, or extra hot-path measurement state.
 That same hot-path boundary now also owns CSP-safe table sizing. Infrastructure
 host, PBS, and PMG table shells must take their layout and column sizing from
 the shared presentation owner in
diff --git a/docs/release-control/v6/internal/subsystems/unified-resources.md b/docs/release-control/v6/internal/subsystems/unified-resources.md
index 4598038540..971e979a3d 100644
--- a/docs/release-control/v6/internal/subsystems/unified-resources.md
+++ b/docs/release-control/v6/internal/subsystems/unified-resources.md
@@ -956,8 +956,11 @@ AI-only summary payloads, or page-local heuristics.
     and `frontend-modern/src/components/Infrastructure/unifiedResourceTableStateModel.ts`
     owns the column-priority breakpoints for host and service infrastructure
     rows. When the app shell leaves tablet-sized space during live resize, the
-    table must hide lower-priority resource metadata columns rather than
-    publishing a horizontally scrolling canonical resource list.
+    table hides lower-priority metadata first, then preserves a readable
+    640-pixel floor for the remaining identity and health columns inside the
+    shared table scroll shell. The document must not overflow, but the table
+    must not compress the prioritized mobile columns until resource names and
+    metric headings become ambiguous.
 15. Keep shared policy-posture framing on the unified-resource card owner.
     `frontend-modern/src/components/Infrastructure/ResourcePolicySummary.tsx`
     may accept caller-owned subtitle or resource-count wording when Patrol or
@@ -2252,6 +2255,11 @@ and viewport reveal plus scroll synchronization now route through
 `frontend-modern/src/components/Infrastructure/useUnifiedResourceTableViewportSync.ts`,
 so the shared consumer model is no longer interleaving selector derivation,
 layout policy, and DOM viewport coordination inside one mixed state boundary.
+The mobile shell class from that shared state model now keeps a 640-pixel
+minimum table width below the small-screen breakpoint while restoring
+`min-w-full` above it. This retains the prioritized mobile column set without
+forcing those columns into unreadable tracks, and the existing shared `Table`
+overflow owner contains the horizontal scroll locally.
 That same unified-resource consumer contract now also owns CSP-safe table
 presentation for infrastructure rows. Host, PBS, and PMG table sections must
 consume the shared column presentation owner and render canonical table sizing
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts b/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
index a145150c51..922538a295 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
+++ b/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
@@ -129,12 +129,13 @@ describe('unifiedResourceTableStateModel', () => {
     const wideColumns = getUnifiedResourceTableColumnPresentations('wide');
 
     expect(getUnifiedResourceTableShellClass('mobile')).toContain('table-fixed');
-    expect(getUnifiedResourceTableShellClass('mobile')).toContain('min-w-full');
-    expect(getUnifiedResourceTableShellClass('compact')).toContain('min-w-full');
-    expect(getUnifiedResourceTableShellClass('wide')).toContain('min-w-full');
+    expect(getUnifiedResourceTableShellClass('mobile')).toContain('min-w-[640px]');
+    expect(getUnifiedResourceTableShellClass('mobile')).toContain('sm:min-w-full');
+    expect(getUnifiedResourceTableShellClass('compact')).toContain('min-w-[640px]');
+    expect(getUnifiedResourceTableShellClass('wide')).toContain('min-w-[640px]');
     expect(getUnifiedResourceTableShellClass('wide')).not.toContain('min-w-[max-content]');
-    // Mobile and tablet use percentage widths so the visible-column set fills
-    // the table surface without horizontal overflow. Wider modes keep all
+    // Mobile keeps the prioritized column set but preserves a readable width
+    // floor inside the shared horizontal-scroll shell. Wider modes keep all
     // host columns visible while compressing their tracks before any
     // lower-priority columns are dropped.
     expect(mobileColumns.resourceColumn.width).toBe('40%');
diff --git a/frontend-modern/src/components/Infrastructure/unifiedResourceTableStateModel.ts b/frontend-modern/src/components/Infrastructure/unifiedResourceTableStateModel.ts
index 9b37dfa998..5a728b6e9a 100644
--- a/frontend-modern/src/components/Infrastructure/unifiedResourceTableStateModel.ts
+++ b/frontend-modern/src/components/Infrastructure/unifiedResourceTableStateModel.ts
@@ -284,7 +284,10 @@ const buildUnifiedResourceTableColumnPresentation = (
 
 export const getUnifiedResourceTableShellClass = (
   layoutMode: UnifiedResourceTableLayoutMode,
-): string => `table-fixed min-w-full${layoutMode === 'wide' ? '' : ' text-[11px] sm:text-xs'}`;
+): string =>
+  `table-fixed min-w-[640px] sm:min-w-full${
+    layoutMode === 'wide' ? '' : ' text-[11px] sm:text-xs'
+  }`;
 
 export const getUnifiedResourceTableHeaderLabels = (
   layoutMode: UnifiedResourceTableLayoutMode,
diff --git a/frontend-modern/src/components/shared/MobileNavBar.tsx b/frontend-modern/src/components/shared/MobileNavBar.tsx
index 50ce6e1913..c2984cfada 100644
--- a/frontend-modern/src/components/shared/MobileNavBar.tsx
+++ b/frontend-modern/src/components/shared/MobileNavBar.tsx
@@ -18,48 +18,65 @@ export function MobileNavBar(props: MobileNavBarProps) {
 
   return (
     <>
-      <nav class="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-surface pb-safe lg:hidden">
-        <div class="relative">
+      <nav
+        class="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-surface pb-safe lg:hidden"
+        role="tablist"
+        aria-label="Mobile navigation"
+      >
+        <div class="flex min-w-0 items-stretch">
+          <div class="relative min-w-0 flex-1">
+            <div
+              ref={mobileNav.setNavRef}
+              data-mobile-nav-rail="primary"
+              class="flex h-full min-w-0 items-center gap-1 overflow-x-auto scrollbar-hide px-2 py-1.5 sm:gap-2 sm:px-4"
+            >
+              <For each={mobileNav.orderedPrimaryTabs()}>
+                {(tab) => {
+                  const Icon = tab.icon;
+
+                  return (
+                    <button
+                      type="button"
+                      data-tab-id={tab.id}
+                      onClick={() => mobileNav.handlePrimaryClick(tab)}
+                      title={tab.tooltip}
+                      class={getMobileNavTabButtonClass({
+                        active: props.activeTab() === tab.id,
+                        enabled: tab.enabled,
+                      })}
+                    >
+                      <span aria-hidden="true" class="relative flex items-center justify-center">
+                        <Icon class={tabIconClass} />
+                      </span>
+                      <span class="whitespace-nowrap">{tab.label}</span>
+                      <Show when={!tab.enabled}>
+                        <span class="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-700 dark:bg-amber-900 dark:text-amber-200">
+                          Setup
+                        </span>
+                      </Show>
+                      <Show when={tab.badge}>
+                        <span class="rounded-full bg-surface-hover px-1.5 py-0.5 text-[9px] font-semibold text-muted">
+                          {tab.badge}
+                        </span>
+                      </Show>
+                    </button>
+                  );
+                }}
+              </For>
+            </div>
+
+            <Show when={mobileNav.showLeftFade()}>
+              <div class="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-surface to-transparent"></div>
+            </Show>
+            <Show when={mobileNav.showFade()}>
+              <div class="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent"></div>
+            </Show>
+          </div>
+
           <div
-            ref={mobileNav.setNavRef}
-            class="flex items-center gap-1 overflow-x-auto scrollbar-hide px-2 py-1.5 sm:gap-2 sm:overflow-x-visible sm:px-4 sm:justify-between"
-            role="tablist"
-            aria-label="Mobile navigation"
+            data-mobile-nav-rail="utility"
+            class="relative z-10 flex shrink-0 items-center gap-0.5 border-l border-border bg-surface px-1 py-1.5"
           >
-            <For each={mobileNav.orderedPrimaryTabs()}>
-              {(tab) => {
-                const Icon = tab.icon;
-
-                return (
-                  <button
-                    type="button"
-                    data-tab-id={tab.id}
-                    onClick={() => mobileNav.handlePrimaryClick(tab)}
-                    title={tab.tooltip}
-                    class={getMobileNavTabButtonClass({
-                      active: props.activeTab() === tab.id,
-                      enabled: tab.enabled,
-                    })}
-                  >
-                    <span aria-hidden="true" class="relative flex items-center justify-center">
-                      <Icon class={tabIconClass} />
-                    </span>
-                    <span class="whitespace-nowrap">{tab.label}</span>
-                    <Show when={!tab.enabled}>
-                      <span class="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-700 dark:bg-amber-900 dark:text-amber-200">
-                        Setup
-                      </span>
-                    </Show>
-                    <Show when={tab.badge}>
-                      <span class="rounded-full bg-surface-hover px-1.5 py-0.5 text-[9px] font-semibold text-muted">
-                        {tab.badge}
-                      </span>
-                    </Show>
-                  </button>
-                );
-              }}
-            </For>
-
             <For each={mobileNav.orderedUtilityTabs()}>
               {(tab) => {
                 const alertBadges = () => getMobileNavAlertBadgeCounts(tab);
@@ -126,13 +143,6 @@ export function MobileNavBar(props: MobileNavBarProps) {
               }}
             </For>
           </div>
-
-          <Show when={mobileNav.showLeftFade()}>
-            <div class="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-surface to-transparent"></div>
-          </Show>
-          <Show when={mobileNav.showFade()}>
-            <div class="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent"></div>
-          </Show>
         </div>
       </nav>
     </>
diff --git a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
index ddce5f52eb..47eb9d07cf 100644
--- a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
+++ b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
@@ -5188,6 +5188,12 @@ describe('shared primitive guardrails', () => {
     expect(sharedPlatformPageSource).toContain('TableCard class={props.cardClass');
     expect(sharedPlatformPageSource).toContain('TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}');
     expect(sharedPlatformPageSource).toContain('TableBody class={PLATFORM_TABLE_BODY_CLASS}');
+    expect(sharedPlatformPageSource).toContain(
+      "export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-[48rem]'",
+    );
+    expect(sharedPlatformPageSource).toContain(
+      'getPlatformTableResponsiveMinWidthClass(props.tableClass)',
+    );
 
     for (const [path, source] of [
       ['src/features/docker/DockerHostsTable.tsx', dockerHostsTableSource],
diff --git a/frontend-modern/src/components/shared/__tests__/MobileNavBar.test.tsx b/frontend-modern/src/components/shared/__tests__/MobileNavBar.test.tsx
index 02dff22f1b..db7e4694ab 100644
--- a/frontend-modern/src/components/shared/__tests__/MobileNavBar.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/MobileNavBar.test.tsx
@@ -217,12 +217,25 @@ describe('MobileNavBar', () => {
       />
     ));
 
-    const navList = screen.getByRole('tablist', { name: 'Mobile navigation' });
-    Object.defineProperty(navList, 'scrollWidth', { configurable: true, value: 400 });
-    Object.defineProperty(navList, 'clientWidth', { configurable: true, value: 200 });
-    Object.defineProperty(navList, 'scrollLeft', { configurable: true, value: 20, writable: true });
+    const primaryRail = container.querySelector('[data-mobile-nav-rail="primary"]');
+    const utilityRail = container.querySelector('[data-mobile-nav-rail="utility"]');
+    expect(primaryRail).toBeTruthy();
+    expect(utilityRail).toBeTruthy();
+    Object.defineProperty(primaryRail as Element, 'scrollWidth', {
+      configurable: true,
+      value: 400,
+    });
+    Object.defineProperty(primaryRail as Element, 'clientWidth', {
+      configurable: true,
+      value: 200,
+    });
+    Object.defineProperty(primaryRail as Element, 'scrollLeft', {
+      configurable: true,
+      value: 20,
+      writable: true,
+    });
 
-    fireEvent.scroll(navList);
+    fireEvent.scroll(primaryRail as Element);
 
     const buttons = container.querySelectorAll('button[data-tab-id]');
     expect(buttons[0]).toHaveAttribute('data-tab-id', 'proxmox');
@@ -233,6 +246,8 @@ describe('MobileNavBar', () => {
     expect(screen.getByText('2')).toBeInTheDocument();
     expect(screen.getByText('3')).toBeInTheDocument();
     expect(screen.getByText('Pro')).toBeInTheDocument();
+    expect(within(utilityRail as HTMLElement).getByTitle('Alerts')).toBeInTheDocument();
+    expect(within(utilityRail as HTMLElement).getByTitle('Settings')).toBeInTheDocument();
 
     fireEvent.click(screen.getByTitle('Machines'));
     expect(onPrimaryClick).toHaveBeenCalledWith(expect.objectContaining({ id: 'standalone' }));
diff --git a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
index 6412b60934..db2c714b13 100644
--- a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
@@ -177,6 +177,8 @@ describe('platform overview layout guardrails', () => {
     expect(sharedPlatformPageSource).toContain('PLATFORM_TABLE_BODY_CLASS');
     expect(sharedPlatformPageSource).toContain('getPlatformTableHeadClass');
     expect(sharedPlatformPageSource).toContain('getPlatformTableCellClass');
+    expect(sharedPlatformPageSource).toContain('getPlatformTableResponsiveMinWidthClass');
+    expect(sharedPlatformPageSource).toContain('PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS');
     expect(sharedPlatformPageSource).toContain('PlatformTableToolbar');
     expect(sharedPlatformPageSource).toContain('PlatformTableLoadingState');
     expect(sharedPlatformPageSource).toContain('PlatformTableShell');
diff --git a/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts b/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
index 5ee2b9f003..3c17a700de 100644
--- a/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
@@ -27,6 +27,7 @@ import {
   formatPlatformTableTextValue,
   getPlatformTableFiniteMetric,
   getPlatformResourceCountNoun,
+  getPlatformTableResponsiveMinWidthClass,
   getPlatformTableWeightedColumnWidthStyle,
   normalizePlatformResourceStatusFilter,
   summarizePlatformTableValues,
@@ -48,6 +49,20 @@ describe('getPlatformResourceCountNoun', () => {
   });
 });
 
+describe('getPlatformTableResponsiveMinWidthClass', () => {
+  it('keeps dense platform columns readable on narrow viewports', () => {
+    expect(getPlatformTableResponsiveMinWidthClass()).toBe('min-w-[48rem]');
+    expect(
+      getPlatformTableResponsiveMinWidthClass('min-w-full table-fixed text-xs md:min-w-[1120px]'),
+    ).toBe('min-w-[48rem]');
+    expect(
+      getPlatformTableResponsiveMinWidthClass(
+        'min-w-[850px] table-fixed text-xs md:min-w-[1320px]',
+      ),
+    ).toBe('');
+  });
+});
+
 describe('normalizePlatformResourceStatusFilter', () => {
   it('normalizes route-specific legacy status vocabulary', () => {
     expect(normalizePlatformResourceStatusFilter('running')).toBe('online');
diff --git a/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx b/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
index 5e98a677fd..2512f78764 100644
--- a/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
+++ b/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
@@ -97,6 +97,12 @@ export type PlatformTableCellAlign = 'left' | 'right' | 'center';
 export const PLATFORM_TABLE_CARD_CLASS = 'rounded-md';
 export const PLATFORM_TABLE_HEADER_ROW_CLASS = 'bg-surface-alt text-muted border-b border-border';
 export const PLATFORM_TABLE_BODY_CLASS = 'divide-y divide-border';
+export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-[48rem]';
+
+export function getPlatformTableResponsiveMinWidthClass(tableClass?: string): string {
+  const hasExplicitBaseFloor = /(?:^|\s)min-w-\[[^\]]+\]/.test(tableClass ?? '');
+  return hasExplicitBaseFloor ? '' : PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS;
+}
 
 export type PlatformTableShellProps = {
   title?: JSX.Element;
@@ -113,7 +119,12 @@ export function PlatformTableShell(props: PlatformTableShellProps) {
   return (
     <TableCard class={props.cardClass ?? PLATFORM_TABLE_CARD_CLASS}>
       <TableCardHeader title={props.title} actions={props.actions} />
-      <Table class={props.tableClass} wrapperClass={props.tableWrapperClass}>
+      <Table
+        class={`${getPlatformTableResponsiveMinWidthClass(props.tableClass)} ${
+          props.tableClass ?? ''
+        }`.trim()}
+        wrapperClass={props.tableWrapperClass}
+      >
         {props.colgroup}
         <TableHeader>
           <TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>{props.header}</TableRow>
diff --git a/tests/integration/tests/04-mobile.spec.ts b/tests/integration/tests/04-mobile.spec.ts
index 0fd4f61a31..f4c6dcdc8f 100644
--- a/tests/integration/tests/04-mobile.spec.ts
+++ b/tests/integration/tests/04-mobile.spec.ts
@@ -1,12 +1,63 @@
 import { test, expect, devices } from '@playwright/test';
 import { ensureAuthenticated } from './helpers';
 
-const getViewportWidth = async (page: import('@playwright/test').Page): Promise<number> => {
+const getViewportWidth = async (
+  page: import('@playwright/test').Page,
+): Promise<number> => {
   const size = page.viewportSize();
   if (size) return size.width;
   return await page.evaluate(() => window.innerWidth);
 };
 
+const MOBILE_VIEWPORTS = [
+  { width: 320, height: 568, label: 'compact phone' },
+  { width: 390, height: 844, label: 'modern phone' },
+] as const;
+
+const CANONICAL_MOBILE_SURFACE_ROUTES = [
+  '/',
+  '/preview/setup-complete',
+  '/route-that-does-not-exist',
+  '/proxmox/overview',
+  '/proxmox/storage',
+  '/proxmox/replication',
+  '/proxmox/backups',
+  '/proxmox/ceph',
+  '/proxmox/mail',
+  '/docker/overview',
+  '/docker/images',
+  '/docker/storage',
+  '/docker/networks',
+  '/docker/swarm',
+  '/kubernetes/overview',
+  '/kubernetes/nodes',
+  '/kubernetes/workloads',
+  '/kubernetes/services',
+  '/kubernetes/storage',
+  '/kubernetes/configuration',
+  '/kubernetes/events',
+  '/truenas/overview',
+  '/truenas/storage',
+  '/truenas/services',
+  '/truenas/apps',
+  '/truenas/vms',
+  '/truenas/shares',
+  '/truenas/protection',
+  '/vmware/overview',
+  '/vmware/storage',
+  '/vmware/networks',
+  '/vmware/health',
+  '/vmware/activity',
+  '/standalone/machines',
+  '/standalone/availability',
+  '/alerts/overview',
+  '/alerts/thresholds',
+  '/alerts/notifications',
+  '/alerts/schedule',
+  '/alerts/history',
+  '/patrol',
+] as const;
+
 test.describe('Mobile viewport flows', () => {
   test.beforeEach(async ({ page }) => {
     await ensureAuthenticated(page);
@@ -16,9 +67,7 @@ test.describe('Mobile viewport flows', () => {
     await page.goto('/infrastructure');
     await expect(page.locator('#root')).toBeVisible();
 
-    const bottomNav = page.locator(
-      'nav.md\\:hidden, nav[class*="md:hidden"], .md\\:hidden nav, [class*="md:hidden"] nav',
-    );
+    const bottomNav = page.getByRole('tablist', { name: 'Mobile navigation' });
 
     // Wait for the nav to mount before evaluating (evaluateAll does not auto-wait;
     // WebKit can be slower to render SolidJS components than Chromium).
@@ -27,21 +76,29 @@ test.describe('Mobile viewport flows', () => {
     const visibleCount = await bottomNav.evaluateAll((els) => {
       const isVisible = (el: Element) => {
         const style = window.getComputedStyle(el as HTMLElement);
-        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
+        if (
+          style.display === 'none' ||
+          style.visibility === 'hidden' ||
+          style.opacity === '0'
+        )
+          return false;
         const rect = (el as HTMLElement).getBoundingClientRect();
         return rect.width > 0 && rect.height > 0;
       };
       return els.filter(isVisible).length;
     });
 
-    expect(visibleCount, 'Expected a visible mobile bottom nav (md:hidden)').toBeGreaterThan(0);
+    expect(
+      visibleCount,
+      'Expected a visible mobile bottom nav',
+    ).toBeGreaterThan(0);
   });
 
   test('MobileNavBar has safe-area padding on nav', async ({ page }) => {
     await page.goto('/infrastructure');
     await expect(page.locator('#root')).toBeVisible();
 
-    const nav = page.locator('nav.md\\:hidden, nav[class*="md:hidden"]').first();
+    const nav = page.getByRole('tablist', { name: 'Mobile navigation' });
     await expect(nav).toBeVisible();
 
     // Verify the safe-area CSS class is applied to the nav. The computed padding-bottom
@@ -49,33 +106,150 @@ test.describe('Mobile viewport flows', () => {
     const hasSafeClass = await nav.evaluate((el: HTMLElement) =>
       el.classList.contains('pb-safe'),
     );
-    expect(hasSafeClass, 'Expected nav to have pb-safe class for safe-area-inset-bottom').toBeTruthy();
+    expect(
+      hasSafeClass,
+      'Expected nav to have pb-safe class for safe-area-inset-bottom',
+    ).toBeTruthy();
   });
 
-  test('Infrastructure filter bar does not overflow horizontally', async ({ page }) => {
-    await page.goto('/infrastructure');
+  test('Platform filter bar does not overflow horizontally', async ({
+    page,
+  }) => {
+    await page.goto('/proxmox/overview');
 
-    await expect(page.getByTestId('infrastructure-page')).toBeVisible();
-    await expect(page.getByPlaceholder('Search resources, IDs, IPs, or tags...')).toBeVisible();
+    await expect(
+      page.getByPlaceholder(
+        'Search VMs and LXCs by name, VMID, node, or status',
+      ),
+    ).toBeVisible();
 
     // On mobile the full filter controls are hidden behind a toggle; only the
     // search bar + Filters button row should be visible. Check the overall page
     // body does not overflow horizontally.
     const viewportWidth = await getViewportWidth(page);
-    const bodyScrollWidth = await page.evaluate(() => document.body.scrollWidth);
-    expect(bodyScrollWidth, 'Infrastructure page body must not overflow horizontally').toBeLessThanOrEqual(viewportWidth + 1);
+    const bodyScrollWidth = await page.evaluate(
+      () => document.body.scrollWidth,
+    );
+    expect(
+      bodyScrollWidth,
+      'Platform page body must not overflow horizontally',
+    ).toBeLessThanOrEqual(viewportWidth + 1);
   });
 
-  test('Infrastructure table wrapper enables horizontal overflow when needed', async ({ page }) => {
-    await page.goto('/infrastructure');
+  test('utility destinations stay pinned beside the scrollable platform rail', async ({
+    page,
+  }) => {
+    await page.goto('/proxmox/overview');
+    await expect(
+      page.getByPlaceholder(
+        'Search VMs and LXCs by name, VMID, node, or status',
+      ),
+    ).toBeVisible({ timeout: 30_000 });
 
-    await expect(page.getByTestId('infrastructure-page')).toBeVisible();
-    await expect(page.getByPlaceholder('Search resources, IDs, IPs, or tags...')).toBeVisible();
+    const primaryRail = page.locator('[data-mobile-nav-rail="primary"]');
+    const utilityRail = page.locator('[data-mobile-nav-rail="utility"]');
+    await expect(primaryRail).toBeVisible();
+    await expect(utilityRail).toBeVisible();
 
-    const tableWrapper = page.locator('div.overflow-x-auto').filter({ has: page.locator('table') }).first();
+    const railGeometry = await primaryRail.evaluate((element) => ({
+      clientWidth: element.clientWidth,
+      scrollWidth: element.scrollWidth,
+      overflowX: window.getComputedStyle(element).overflowX,
+    }));
+    expect(['auto', 'scroll']).toContain(railGeometry.overflowX);
+    expect(railGeometry.scrollWidth).toBeGreaterThanOrEqual(
+      railGeometry.clientWidth,
+    );
+
+    const viewportWidth = await getViewportWidth(page);
+    for (const tabId of ['alerts', 'ai', 'settings']) {
+      const button = utilityRail.locator(`button[data-tab-id="${tabId}"]`);
+      await expect(button).toBeVisible();
+      const box = await button.boundingBox();
+      expect(
+        box,
+        `${tabId} utility destination should have a layout box`,
+      ).toBeTruthy();
+      expect((box?.x ?? 0) + (box?.width ?? 0)).toBeLessThanOrEqual(
+        viewportWidth + 1,
+      );
+    }
+  });
+
+  test('canonical product routes keep mobile overflow contained and dense tables readable', async ({
+    page,
+  }) => {
+    test.setTimeout(240_000);
+
+    for (const viewport of MOBILE_VIEWPORTS) {
+      await page.setViewportSize(viewport);
+
+      for (const route of CANONICAL_MOBILE_SURFACE_ROUTES) {
+        await page.goto(route, { waitUntil: 'domcontentloaded' });
+        await expect(
+          page.locator('#root'),
+          `${route} should render the app surface on a ${viewport.label}`,
+        ).toBeVisible();
+
+        const viewportWidth = await getViewportWidth(page);
+        const layout = await page.evaluate(() => ({
+          bodyWidth: document.body.scrollWidth,
+          documentWidth: document.documentElement.scrollWidth,
+        }));
+        expect(
+          Math.max(layout.bodyWidth, layout.documentWidth),
+          `${route} must contain horizontal overflow inside the owning control or table shell on a ${viewport.label}`,
+        ).toBeLessThanOrEqual(viewportWidth + 1);
+
+        const denseTables = await page
+          .locator('#root div.overflow-x-auto')
+          .filter({ has: page.locator('table') })
+          .evaluateAll((wrappers) =>
+            wrappers
+              .map((wrapper) => {
+                const table = wrapper.querySelector('table');
+                const headerCount =
+                  table?.querySelectorAll('thead th').length ?? 0;
+                return {
+                  headerCount,
+                  tableWidth: table?.scrollWidth ?? 0,
+                  wrapperWidth: wrapper.clientWidth,
+                };
+              })
+              .filter((table) => table.headerCount >= 4),
+          );
+
+        for (const table of denseTables) {
+          expect(
+            table.tableWidth,
+            `${route} should scroll dense tables instead of compressing their columns on a ${viewport.label}`,
+          ).toBeGreaterThan(table.wrapperWidth);
+        }
+      }
+    }
+  });
+
+  test('Platform table wrapper enables horizontal overflow when needed', async ({
+    page,
+  }) => {
+    await page.goto('/proxmox/overview');
+
+    await expect(
+      page.getByPlaceholder(
+        'Search VMs and LXCs by name, VMID, node, or status',
+      ),
+    ).toBeVisible();
+
+    const tableWrapper = page
+      .locator('div.overflow-x-auto')
+      .filter({ has: page.locator('table') })
+      .first();
     const wrapperVisible = await tableWrapper.isVisible().catch(() => false);
     if (!wrapperVisible) {
-      test.skip(true, 'No infrastructure table rendered (no resources or table not present)');
+      test.skip(
+        true,
+        'No platform table rendered (no resources or table not present)',
+      );
     }
 
     const overflowBehavior = await tableWrapper.evaluate((el) => {
@@ -98,32 +272,46 @@ test.describe('Mobile viewport flows', () => {
     expect(overflowBehavior.tableScrollWidth).toBeGreaterThan(0);
   });
 
-  test('Tapping a resource row opens the detail drawer', async ({ page }) => {
-    await page.goto('/infrastructure');
+  test('Tapping a resource disclosure opens its mobile detail state', async ({
+    page,
+  }) => {
+    await page.goto('/proxmox/overview');
 
-    await expect(page.getByTestId('infrastructure-page')).toBeVisible();
-    await expect(page.getByPlaceholder('Search resources, IDs, IPs, or tags...')).toBeVisible();
+    await expect(
+      page.getByPlaceholder(
+        'Search VMs and LXCs by name, VMID, node, or status',
+      ),
+    ).toBeVisible();
 
-    const row = page.locator('table tbody tr.cursor-pointer').first();
-    const rowVisible = await row.isVisible().catch(() => false);
-    if (!rowVisible) {
+    const disclosure = page
+      .getByRole('button', { name: /^Expand details for / })
+      .first();
+    const disclosureVisible = await disclosure.isVisible().catch(() => false);
+    if (!disclosureVisible) {
       test.skip(true, 'No resource rows available to expand');
     }
 
-    await row.click();
+    const expandedLabel = (
+      await disclosure.getAttribute('aria-label')
+    )?.replace(/^Expand /, 'Collapse ');
+    expect(expandedLabel).toBeTruthy();
+    await disclosure.click();
 
-    // On mobile, the drawer renders as a Portal bottom sheet (not inline in a <td>).
-    // Look for the Discovery tab button anywhere on the page.
-    const discoveryTab = page.getByText('Discovery', { exact: true }).first();
-    await expect(discoveryTab).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByRole('button', { name: expandedLabel! }),
+    ).toBeVisible();
   });
 
-  test('Infrastructure landing loads without horizontal overflow at mobile viewport', async ({ page }) => {
+  test('Infrastructure landing loads without horizontal overflow at mobile viewport', async ({
+    page,
+  }) => {
     await page.goto('/infrastructure');
     await expect(page.locator('#root')).toBeVisible();
 
     const viewportWidth = await getViewportWidth(page);
-    const bodyScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    const bodyScrollWidth = await page.evaluate(
+      () => document.body.scrollWidth,
+    );
     expect(bodyScrollWidth).toBeLessThanOrEqual(viewportWidth + 1);
   });
 
@@ -131,10 +319,12 @@ test.describe('Mobile viewport flows', () => {
     await page.goto('/infrastructure');
     await expect(page.locator('#root')).toBeVisible();
 
-    const nav = page.locator('nav.md\\:hidden, nav[class*="md:hidden"]').first();
+    const nav = page.getByRole('tablist', { name: 'Mobile navigation' });
     await expect(nav).toBeVisible();
 
-    const aiButton = page.getByRole('button', { name: 'Expand Pulse Assistant' });
+    const aiButton = page.getByRole('button', {
+      name: /Ask Pulse Assistant about/,
+    });
     await expect(aiButton).toBeVisible();
 
     const navBox = await nav.boundingBox();
@@ -144,7 +334,9 @@ test.describe('Mobile viewport flows', () => {
     expect(aiBox, 'Expected AI button bounding box').toBeTruthy();
 
     const navTop = (navBox as { y: number }).y;
-    const aiBottom = (aiBox as { y: number; height: number }).y + (aiBox as { height: number }).height;
+    const aiBottom =
+      (aiBox as { y: number; height: number }).y +
+      (aiBox as { height: number }).height;
     expect(aiBottom).toBeLessThanOrEqual(navTop + 1);
   });
 });
diff --git a/tests/integration/tests/05-settings-mobile-audit.spec.ts b/tests/integration/tests/05-settings-mobile-audit.spec.ts
index 06cdc2f99f..b43a4f1609 100644
--- a/tests/integration/tests/05-settings-mobile-audit.spec.ts
+++ b/tests/integration/tests/05-settings-mobile-audit.spec.ts
@@ -6,150 +6,181 @@ import { createAuthenticatedStorageState } from './helpers';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 type WorkerFixtures = {
-    authStorageStatePath: string;
+  authStorageStatePath: string;
 };
 
 const SETTINGS_ROUTES = [
-    '/settings/infrastructure',
-    '/settings/infrastructure/pve',
-    '/settings/infrastructure/pbs',
-    '/settings/infrastructure/pmg',
-    '/settings/workloads',
-    '/settings/workloads/docker',
-    '/settings/organization',
-    '/settings/organization/access',
-    '/settings/organization/sharing',
-    '/settings/organization/billing',
-    '/settings/organization/billing-admin',
-    '/settings/integrations/api',
-    '/operations/diagnostics',
-    '/operations/reporting',
-    '/operations/logs',
-    '/settings/system-general',
-    '/settings/system-network',
-    '/settings/system-updates',
-    '/settings/system-recovery',
-    '/settings/system-ai',
-    '/settings/system-relay',
-    '/settings/system-pro',
-    '/settings/security-overview',
-    '/settings/security-auth',
-    '/settings/security-sso',
-    '/settings/security-roles',
-    '/settings/security-users',
-    '/settings/security-audit',
-    '/settings/security-webhooks',
+  '/settings/infrastructure',
+  '/settings/monitoring/availability',
+  '/settings/pulse-intelligence/provider',
+  '/settings/pulse-intelligence/patrol',
+  '/settings/pulse-intelligence/assistant',
+  '/settings/pulse-intelligence/discovery',
+  '/settings/pulse-intelligence/billing/plan',
+  '/settings/pulse-intelligence/billing/usage',
+  '/settings/organization',
+  '/settings/organization/access',
+  '/settings/organization/sharing',
+  '/settings/organization/billing',
+  '/settings/organization/billing-admin',
+  '/settings/system-general',
+  '/settings/system-network',
+  '/settings/system-updates',
+  '/settings/system-recovery',
+  '/settings/system-relay',
+  '/settings/support/diagnostics',
+  '/settings/support/reporting',
+  '/settings/support/logs',
+  '/settings/security/api',
+  '/settings/security-overview',
+  '/settings/security-data-handling',
+  '/settings/security-auth',
+  '/settings/security-sso',
+  '/settings/security-roles',
+  '/settings/security-users',
+  '/settings/security-audit',
+  '/settings/security-webhooks',
+] as const;
+
+const MOBILE_VIEWPORTS = [
+  { width: 320, height: 568, label: 'compact phone' },
+  { width: 390, height: 844, label: 'modern phone' },
 ] as const;
 
 const test = base.extend<{}, WorkerFixtures>({
-    storageState: async ({ authStorageStatePath }, use) => {
-        await use(authStorageStatePath);
+  storageState: async ({ authStorageStatePath }, use) => {
+    await use(authStorageStatePath);
+  },
+  authStorageStatePath: [
+    async ({ browser }, use, workerInfo) => {
+      const storageStatePath = path.resolve(
+        __dirname,
+        '..',
+        '..',
+        'tmp',
+        'playwright-auth',
+        `settings-mobile-audit-${workerInfo.project.name}.json`,
+      );
+      fs.mkdirSync(path.dirname(storageStatePath), { recursive: true });
+      await createAuthenticatedStorageState(browser, storageStatePath);
+      try {
+        await use(storageStatePath);
+      } finally {
+        fs.rmSync(storageStatePath, { force: true });
+      }
     },
-    authStorageStatePath: [async ({ browser }, use, workerInfo) => {
-        const storageStatePath = path.resolve(
-            __dirname,
-            '..',
-            '..',
-            'tmp',
-            'playwright-auth',
-            `settings-mobile-audit-${workerInfo.project.name}.json`,
-        );
-        fs.mkdirSync(path.dirname(storageStatePath), { recursive: true });
-        await createAuthenticatedStorageState(browser, storageStatePath);
-        try {
-            await use(storageStatePath);
-        } finally {
-            fs.rmSync(storageStatePath, { force: true });
-        }
-    }, { scope: 'worker' }],
+    { scope: 'worker' },
+  ],
 });
 
 type OverflowAudit = {
-    viewportWidth: number;
-    pageWidth: number;
-    overflowPx: number;
-    offenders: Array<{ tag: string; className: string; overflow: number }>;
+  viewportWidth: number;
+  pageWidth: number;
+  overflowPx: number;
+  offenders: Array<{ tag: string; className: string; overflow: number }>;
 };
 
 const auditHorizontalOverflow = async (
-    page: import('@playwright/test').Page,
+  page: import('@playwright/test').Page,
 ): Promise<OverflowAudit> =>
-    page.evaluate(() => {
-        const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-        const pageWidth = Math.max(
-            document.body.scrollWidth,
-            document.documentElement.scrollWidth,
-            document.body.offsetWidth,
-            document.documentElement.offsetWidth,
-        );
-
-        const offenders = Array.from(document.querySelectorAll('body *'))
-            .map((el) => {
-                const rect = el.getBoundingClientRect();
-                if (rect.width <= 0 || rect.height <= 0) return null;
-                const style = window.getComputedStyle(el);
-                if (style.position === 'fixed' || style.position === 'absolute') return null;
-                const overflow = rect.right - viewportWidth;
-                if (overflow <= 1) return null;
-                return {
-                    tag: el.tagName.toLowerCase(),
-                    className: (el.getAttribute('class') || '').trim().slice(0, 120),
-                    overflow: Number(overflow.toFixed(1)),
-                };
-            })
-            .filter((entry): entry is { tag: string; className: string; overflow: number } => Boolean(entry))
-            .slice(0, 8);
+  page.evaluate(() => {
+    const viewportWidth = Math.max(
+      document.documentElement.clientWidth,
+      window.innerWidth || 0,
+    );
+    const pageWidth = Math.max(
+      document.body.scrollWidth,
+      document.documentElement.scrollWidth,
+      document.body.offsetWidth,
+      document.documentElement.offsetWidth,
+    );
 
+    const offenders = Array.from(document.querySelectorAll('body *'))
+      .map((el) => {
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) return null;
+        const style = window.getComputedStyle(el);
+        if (style.position === 'fixed' || style.position === 'absolute')
+          return null;
+        const overflow = rect.right - viewportWidth;
+        if (overflow <= 1) return null;
         return {
-            viewportWidth,
-            pageWidth,
-            overflowPx: Number((pageWidth - viewportWidth).toFixed(1)),
-            offenders,
+          tag: el.tagName.toLowerCase(),
+          className: (el.getAttribute('class') || '').trim().slice(0, 120),
+          overflow: Number(overflow.toFixed(1)),
         };
-    });
+      })
+      .filter(
+        (
+          entry,
+        ): entry is { tag: string; className: string; overflow: number } =>
+          Boolean(entry),
+      )
+      .slice(0, 8);
 
-const scrollToBottom = async (page: import('@playwright/test').Page): Promise<void> => {
-    const viewportHeight = await page.evaluate(() => window.innerHeight || 800);
-    const step = Math.max(240, Math.floor(viewportHeight * 0.75));
-    let wheelSupported = true;
-    for (let i = 0; i < 20; i += 1) {
-        if (wheelSupported) {
-            try {
-                await page.mouse.wheel(0, step);
-            } catch {
-                wheelSupported = false;
-                await page.evaluate((deltaY) => window.scrollBy(0, deltaY), step);
-            }
-        } else {
-            await page.evaluate((deltaY) => window.scrollBy(0, deltaY), step);
-        }
-        await page.waitForTimeout(60);
+    return {
+      viewportWidth,
+      pageWidth,
+      overflowPx: Number((pageWidth - viewportWidth).toFixed(1)),
+      offenders,
+    };
+  });
+
+const scrollToBottom = async (
+  page: import('@playwright/test').Page,
+): Promise<void> => {
+  const viewportHeight = await page.evaluate(() => window.innerHeight || 800);
+  const step = Math.max(240, Math.floor(viewportHeight * 0.75));
+  let wheelSupported = true;
+  for (let i = 0; i < 20; i += 1) {
+    if (wheelSupported) {
+      try {
+        await page.mouse.wheel(0, step);
+      } catch {
+        wheelSupported = false;
+        await page.evaluate((deltaY) => window.scrollBy(0, deltaY), step);
+      }
+    } else {
+      await page.evaluate((deltaY) => window.scrollBy(0, deltaY), step);
     }
+    await page.waitForTimeout(60);
+  }
 };
 
 test.describe('Settings mobile optimization audit', () => {
-    test.setTimeout(180_000);
+  test.setTimeout(180_000);
 
-    for (const route of SETTINGS_ROUTES) {
-        test(`no horizontal overflow after full scroll on ${route}`, async ({ page }) => {
-            await page.goto(route, { waitUntil: 'domcontentloaded' });
-            await page.waitForURL(/\/(settings|operations)/, { timeout: 15000 });
-            await expect(page.locator('#root')).toBeVisible();
-            await page.waitForTimeout(600);
+  for (const route of SETTINGS_ROUTES) {
+    test(`no horizontal overflow after full scroll on ${route}`, async ({
+      page,
+    }) => {
+      for (const viewport of MOBILE_VIEWPORTS) {
+        await page.setViewportSize(viewport);
+        await page.goto(route, { waitUntil: 'domcontentloaded' });
+        await page.waitForURL(/\/settings/, { timeout: 15000 });
+        await expect(page.locator('#root')).toBeVisible();
+        await page.waitForTimeout(600);
 
-            await scrollToBottom(page);
-            const atBottom = await page.evaluate(() => {
-                const scrollTop = window.scrollY;
-                const maxScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
-                return scrollTop >= maxScrollTop - 3;
-            });
-            expect(atBottom, `Expected to reach the bottom while auditing ${route}`).toBeTruthy();
-
-            const audit = await auditHorizontalOverflow(page);
-            expect(
-                audit.pageWidth,
-                `Mobile overflow on ${route} (viewport=${audit.viewportWidth}, page=${audit.pageWidth}, offenders=${JSON.stringify(audit.offenders)})`,
-            ).toBeLessThanOrEqual(audit.viewportWidth + 1);
+        await scrollToBottom(page);
+        const atBottom = await page.evaluate(() => {
+          const scrollTop = window.scrollY;
+          const maxScrollTop = Math.max(
+            0,
+            document.documentElement.scrollHeight - window.innerHeight,
+          );
+          return scrollTop >= maxScrollTop - 3;
         });
-    }
+        expect(
+          atBottom,
+          `Expected to reach the bottom while auditing ${route} on a ${viewport.label}`,
+        ).toBeTruthy();
+
+        const audit = await auditHorizontalOverflow(page);
+        expect(
+          audit.pageWidth,
+          `Mobile overflow on ${route} at ${viewport.width}px (viewport=${audit.viewportWidth}, page=${audit.pageWidth}, offenders=${JSON.stringify(audit.offenders)})`,
+        ).toBeLessThanOrEqual(audit.viewportWidth + 1);
+      }
+    });
+  }
 });