From fb171fb0de1896d9c521f9be9fda0faddd92523a Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 18 Jul 2026 07:57:53 +0800
Subject: [PATCH] fix mobile track workspace layout

---
 .../apps/web/src/v2/pages/TrackPage.test.tsx  |  4 +++-
 .../apps/web/src/v2/pages/TrackPage.tsx       |  2 +-
 .../apps/web/src/v2/styles/workspace.css      | 24 +++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
index 50288adc..8f774eff 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
@@ -241,9 +241,11 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
 test('uses a Semi bottom SideSheet for mobile track criteria and evidence', async () => {
   Object.defineProperty(window, 'matchMedia', { configurable: true, value: vi.fn(() => ({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })) });
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  render(<QueryClientProvider client={client}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/tracks?keyword=LTEST000000000001&dateFrom=2026-07-15T00:00&dateTo=2026-07-15T23:59']}><TrackPage /></MemoryRouter></QueryClientProvider>);
+  const view = render(<QueryClientProvider client={client}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/tracks?keyword=LTEST000000000001&dateFrom=2026-07-15T00:00&dateTo=2026-07-15T23:59']}><TrackPage /></MemoryRouter></QueryClientProvider>);
 
   expect((await screen.findAllByText('粤A12345')).length).toBeGreaterThan(0);
+  expect(view.container.querySelector('.v2-track-page')).toHaveClass('is-mobile-layout', 'is-rail-collapsed');
+  expect(view.container.querySelector('.v2-track-page > .v2-track-stage')).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '展开查询与明细' }));
 
   const sheet = await waitFor(() => {
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
index 218282f8..d7f1b160 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
@@ -368,7 +368,7 @@ export default function TrackPage() {
   const progress = points.length > 1 ? boundedIndex / (points.length - 1) * 100 : 0;
   const trackRail = <TrackRail draft={draft} track={track} loading={query.isFetching} activeStopIndexes={activeStopIndexes} activeEventIndexes={activeEventIndexes} tab={panelTab} queryCollapsed={queryCollapsed} onDraft={setDraft} onSubmit={submit} onTab={setPanelTab} onSelectIndex={selectIndex} onToggleQuery={() => setQueryCollapsed((value) => !value)} onCollapse={collapseRail} />;
 
-  return <div className={`v2-track-page${railCollapsed ? ' is-rail-collapsed' : ''}${monitorReturn ? ' has-monitor-return' : ''}`}>
+  return <div className={`v2-track-page${mobileLayout ? ' is-mobile-layout' : ''}${railCollapsed ? ' is-rail-collapsed' : ''}${monitorReturn ? ' has-monitor-return' : ''}`}>
     <MonitorReturnBar />
     {mobileLayout ? <SideSheet
       className="v2-track-detail-sidesheet"
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
index 52746e3c..5af2f631 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -18,6 +18,30 @@
   padding: 8px 14px;
 }
 
+/*
+ * Track criteria live in a portal-backed SideSheet on phones, so the stage is
+ * the only in-flow workspace child. Bind layout to the component's mobile
+ * state instead of relying on overlapping historical media-query overrides.
+ */
+.v2-track-page.is-mobile-layout,
+.v2-track-page.is-mobile-layout.is-rail-collapsed {
+  display: flex;
+  grid-template-columns: none;
+  grid-template-rows: none;
+  flex-direction: column;
+}
+
+.v2-track-page.is-mobile-layout > .v2-monitor-return {
+  flex: 0 0 auto;
+}
+
+.v2-track-page.is-mobile-layout > .v2-track-stage {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
 /* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
  * one compact playback surface. */
 .v2-track-page {