From cd5336f3535ca8662685dd0d3522f12e86dcdd94 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Mon, 6 Jul 2026 00:55:24 +0800
Subject: [PATCH] fix(platform): prioritize mobile vehicle service content

---
 .../apps/web/src/layout/AppShell.tsx               |  2 +-
 .../apps/web/src/styles/global.css                 |  9 +++++++++
 .../apps/web/src/test/App.test.tsx                 | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
index cd9e3144..0bd97ef2 100644
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/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" />
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index d2b1dc88..6b9ce4b2 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/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 {
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index c8581439..2ed2a49c 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/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,