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(
);
+ 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,