fix(platform): prioritize mobile vehicle service content

vehicle-data-platform/apps/web/src/layout/AppShell.tsx

@@ -223,7 +223,7 @@ export function AppShell({
 
   return (
     <div className="vp-app">
-      <div className="vp-shell">
+      <div className="vp-shell" data-testid="vehicle-platform-shell" data-mobile-layout="content-first">
         <aside className="vp-sidebar">
           <div className="vp-brand">
             <span className="vp-brand-mark" />

vehicle-data-platform/apps/web/src/styles/global.css

@@ -12510,10 +12510,19 @@ button.vp-realtime-command-item:focus-visible {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .vp-main {
+    order: -1;
+  }
+
   .vp-sidebar {
+    order: 2;
     position: relative;
     height: auto;
+    max-height: 340px;
+    overflow-y: auto;
     padding: 12px;
+    border-right: 0;
+    border-top: 1px solid var(--vp-border);
   }
 
   .vp-topbar {

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -11,6 +11,20 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
+test('mobile shell prioritizes customer vehicle service content before sidebar navigation', () => {
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async () => ({
+    ok: true,
+    json: async () => ({
+      data: { items: [], total: 0, limit: 20, offset: 0, linkHealth: [], runtime: { requestTimeoutMs: 5000 } },
+      traceId: 'trace-test',
+      timestamp: 1783094400000
+    })
+  }) as Response);
+
+  render(<App />);
+  expect(screen.getByTestId('vehicle-platform-shell')).toHaveAttribute('data-mobile-layout', 'content-first');
+});
+
 test('renders vehicle platform shell', () => {
   vi.spyOn(globalThis, 'fetch').mockImplementation(async () => ({
     ok: true,