diff --git a/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts b/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts index a3b33173..1f7f1399 100644 --- a/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts +++ b/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts @@ -283,6 +283,12 @@ describe('V2 production entry', () => { expect(workspaceStyles).toContain('grid-template-columns: minmax(260px, 1.08fr) minmax(220px, .92fr);'); expect(workspaceStyles).toContain('.v2-user-editor-sidesheet .v2-assigned-vins {'); expect(workspaceStyles).toContain('grid-template-columns: repeat(2, minmax(0, 1fr));'); + expect(workspaceStyles).toContain('Short landscape operations cockpit.'); + expect(workspaceStyles).toContain('grid-template-columns: minmax(196px, .42fr) minmax(0, 1fr);'); + expect(workspaceStyles).toContain('.v2-ops-workspace.is-health .v2-ops-metric-rail {'); + expect(workspaceStyles).toContain('grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr));'); + expect(workspaceStyles).toContain('.v2-ops-workspace.is-diagnostic {'); + expect(workspaceStyles).toContain('grid-template-columns: minmax(176px, .34fr) minmax(0, 1fr);'); expect(corePageSources.OperationsPage).toContain(' .v2-ops-command-bar { + width: 100%; + height: 44px; + min-height: 44px; + grid-column: 1; + grid-row: 1; + gap: 5px; + border-radius: 9px; + padding: 4px 5px 4px 9px; + } + + .v2-ops-command-bar .v2-workspace-command-copy { + min-width: 0; + gap: 0; + } + + .v2-ops-command-bar .v2-workspace-command-copy > .semi-typography:first-child { + overflow: hidden; + font-size: 11px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .v2-ops-command-bar .v2-workspace-command-copy > .semi-typography:last-child, + .v2-ops-command-bar .v2-workspace-command-status, + .v2-ops-command-bar .v2-workspace-command-meta { + display: none; + } + + .v2-ops-command-bar .v2-workspace-command-actions > .semi-button { + width: 34px; + min-width: 34px; + height: 34px; + min-height: 34px; + border-radius: 8px; + } + + .v2-ops-navigation { + position: static; + z-index: auto; + width: 100%; + height: 44px; + min-height: 44px; + grid-column: 2; + grid-row: 1; + border-radius: 9px; + padding: 3px; + } + + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs { + width: 100%; + height: 36px; + min-height: 36px; + grid-template-columns: repeat(3, minmax(88px, 1fr)); + gap: 2px; + overflow: hidden; + border-radius: 7px; + padding: 2px; + } + + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs > .semi-button { + min-width: 0; + height: 32px; + min-height: 32px; + border-radius: 6px; + padding-inline: 5px; + font-size: 10px; + } + + .v2-ops-navigation-meta { + display: none; + } + + .v2-ops-page > .v2-ops-workspace { + width: 100%; + height: 100%; + min-height: 0; + grid-column: 1 / -1; + grid-row: 2; + flex: none; + overflow: auto; + scrollbar-gutter: stable; + } + + .v2-ops-page > .v2-ops-workspace.is-reconciliation { + overflow: hidden; + } + + .v2-reconcile-heading.v2-workspace-panel-header { + min-height: 42px; + padding: 4px 7px; + } + + .v2-reconcile-heading .v2-workspace-panel-copy > .semi-typography:not(h5), + .v2-reconcile-heading .v2-reconcile-auto-tag { + display: none; + } + + .v2-reconcile-heading .v2-workspace-panel-copy > h5.semi-typography { + font-size: 11px; + } + + .v2-reconcile-heading > .v2-workspace-panel-actions { + gap: 4px; + } + + .v2-reconcile-heading > .v2-workspace-panel-actions > .semi-button { + height: 32px; + min-height: 32px; + border-radius: 7px; + padding-inline: 8px; + font-size: 9px; + } + + .v2-reconcile-overview, + .v2-reconcile-overview > .v2-reconcile-kpis, + .v2-reconcile-overview .v2-reconcile-kpi-card.semi-card { + height: 58px; + } + + .v2-reconcile-overview .v2-reconcile-kpi-card > .semi-card-body { + min-height: 58px; + padding: 6px 8px; + } + + .v2-reconcile-overview .v2-reconcile-kpi-card small { + font-size: 8px; + } + + .v2-reconcile-overview .v2-reconcile-kpi-card strong { + margin-top: 3px; + font-size: 16px; + } + + .v2-reconcile-overview .v2-reconcile-kpi-card span { + display: none; + } + + .v2-ops-workspace.is-health { + gap: 5px; + } + + .v2-ops-workspace.is-health .v2-ops-overview > .semi-card-body > .v2-workspace-panel-header, + .v2-ops-workspace.is-health .v2-ops-panel > .semi-card-body > .v2-workspace-panel-header { + min-height: 40px; + padding: 4px 8px; + } + + .v2-ops-workspace.is-health .v2-workspace-panel-copy { + gap: 0; + } + + .v2-ops-workspace.is-health .v2-workspace-panel-copy > h5.semi-typography { + font-size: 11px; + } + + .v2-ops-workspace.is-health .v2-workspace-panel-copy > .semi-typography:not(h5), + .v2-ops-workspace.is-health .v2-ops-overview-meta > .semi-typography { + display: none; + } + + .v2-ops-workspace.is-health .v2-ops-overview-meta { + gap: 4px; + } + + .v2-ops-workspace.is-health .v2-ops-overview-meta .semi-tag, + .v2-ops-workspace.is-health .v2-workspace-panel-actions .semi-tag { + min-height: 21px; + padding-inline: 6px; + font-size: 8px; + } + + .v2-ops-workspace.is-health .v2-ops-metric-rail { + display: grid; + grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr)); + overflow: hidden; + } + + .v2-ops-workspace.is-health .v2-ops-metric, + .v2-ops-workspace.is-health .v2-ops-metric:first-child { + min-width: 0; + min-height: 78px; + grid-column: auto; + border-top: 0; + border-right: 0; + border-left: 1px solid #e7edf4; + padding: 8px 9px 7px; + } + + .v2-ops-workspace.is-health .v2-ops-metric:first-child { + border-left: 0; + } + + .v2-ops-workspace.is-health .v2-ops-metric small { + font-size: 8px; + } + + .v2-ops-workspace.is-health .v2-ops-metric strong, + .v2-ops-workspace.is-health .v2-ops-metric:first-child strong { + margin: 6px 0 5px; + font-size: 15px; + } + + .v2-ops-workspace.is-health .v2-ops-metric:first-child strong { + font-size: 16px; + } + + .v2-ops-workspace.is-health .v2-ops-metric span { + font-size: 8px; + line-height: 1.3; + } + + .v2-ops-workspace.is-health .v2-ops-metric::after { + right: 9px; + left: 9px; + height: 2px; + } + + .v2-ops-workspace.is-health .v2-ops-source-list.semi-card-group { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 5px; + overflow: visible; + padding: 5px; + scroll-snap-type: none; + } + + .v2-ops-workspace.is-health .v2-ops-source-card.semi-card { + width: auto; + min-width: 0; + flex: none; + } + + .v2-ops-workspace.is-diagnostic { + display: grid; + min-height: 0; + grid-template-columns: minmax(176px, .34fr) minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + align-items: stretch; + gap: 5px; + overflow: hidden; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-mobile-discovery { + min-height: 0; + align-content: start; + grid-column: 1; + grid-row: 1; + } + + .v2-ops-workspace.is-diagnostic .v2-source-mobile-discovery > .v2-mobile-filter-toggle.semi-button { + height: 50px; + min-height: 50px; + border-radius: 9px; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-diagnostic.semi-card { + height: 100%; + min-height: 0; + grid-column: 2; + grid-row: 1; + overflow: auto; + border-radius: 9px; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-diagnostic > .semi-card-body > .v2-workspace-panel-header { + min-height: 42px; + padding: 4px 7px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-copy { + gap: 0; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-copy > h5.semi-typography { + font-size: 11px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-copy > .semi-typography:not(h5) { + font-size: 8px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-actions { + gap: 4px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-actions .semi-tag { + min-height: 21px; + padding-inline: 6px; + font-size: 8px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-diagnostic .v2-workspace-panel-actions > .semi-button { + height: 30px; + min-height: 30px; + border-radius: 7px; + padding-inline: 7px; + font-size: 8px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary.semi-card-group { + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 4px; + padding: 4px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary-card.semi-card > .semi-card-body { + min-height: 62px; + padding: 7px 8px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary-card small { + font-size: 8px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary-card strong { + margin-top: 4px; + font-size: 12px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary-card span { + margin-top: 3px; + font-size: 7px; + } + + .v2-source-mobile-filter-sidesheet.semi-sidesheet-bottom .semi-sidesheet-inner { + height: 100dvh !important; + max-height: 100dvh; + border-radius: 0; + } + + .v2-source-mobile-filter-sidesheet.semi-sidesheet-bottom .semi-sidesheet-header { + min-height: 52px; + padding: 6px 11px; + } + + .v2-source-mobile-filter-sidesheet.semi-sidesheet-bottom .semi-sidesheet-body { + padding: 7px; + } + + .v2-source-mobile-filter-sidesheet.semi-sidesheet-bottom .semi-sidesheet-footer { + padding: 6px 9px; + } + + .v2-source-mobile-filter-title > span, + .v2-source-mobile-filter-section > header { + display: none; + } + + .v2-source-mobile-filter-form { + gap: 6px; + } + + .v2-source-mobile-filter-section { + gap: 6px; + padding: 8px; + } + + .v2-source-mobile-filter-sidesheet .v2-source-candidates.v2-vehicle-candidate-list { + max-height: min(48dvh, 182px); + } +} + /* * Semi UI task-bar convergence for trajectory replay and single-vehicle * investigation. These routes keep their map-first information density while @@ -18903,3 +19285,149 @@ padding: 7px 8px; } } + +/* + * Keep the short-landscape operations evidence layout last in the cascade. + * The shared mobile workspace rules intentionally favor portrait stacking; + * these few geometry rules restore the landscape cockpit after those defaults. + */ +@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) { + .v2-ops-page { + display: grid; + height: 100%; + min-height: 0; + grid-template-columns: minmax(196px, .42fr) minmax(0, 1fr); + grid-template-rows: 44px minmax(0, 1fr); + gap: 5px; + overflow: hidden; + padding: 5px 6px 6px; + } + + .v2-ops-page > .v2-ops-command-bar, + .v2-ops-page > .v2-ops-navigation { + height: 44px; + min-height: 44px; + } + + .v2-ops-page > .v2-ops-navigation { + position: static; + grid-column: 2; + grid-row: 1; + padding: 3px; + } + + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs { + height: 36px; + min-height: 36px; + } + + .v2-ops-page > .v2-ops-workspace { + width: 100%; + height: 100%; + min-height: 0; + grid-column: 1 / -1; + grid-row: 2; + flex: none; + overflow: auto; + } + + .v2-ops-page > .v2-ops-workspace.is-reconciliation { + overflow: hidden; + } + + .v2-ops-workspace.is-health .v2-ops-metric-rail { + display: grid; + grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr)); + overflow: hidden; + } + + .v2-ops-workspace.is-health .v2-ops-metric, + .v2-ops-workspace.is-health .v2-ops-metric:first-child { + min-width: 0; + min-height: 78px; + grid-column: auto; + border-top: 0; + border-right: 0; + border-left: 1px solid #e7edf4; + padding: 8px 9px 7px; + } + + .v2-ops-workspace.is-health .v2-ops-metric:first-child { + border-left: 0; + } + + .v2-ops-workspace.is-health .v2-ops-metric small { + font-size: 8px; + } + + .v2-ops-workspace.is-health .v2-ops-metric strong, + .v2-ops-workspace.is-health .v2-ops-metric:first-child strong { + margin: 6px 0 5px; + font-size: 15px; + } + + .v2-ops-workspace.is-health .v2-ops-metric:first-child strong { + font-size: 16px; + } + + .v2-ops-workspace.is-health .v2-ops-metric span { + font-size: 8px; + line-height: 1.3; + } + + .v2-ops-workspace.is-health .v2-ops-metric::after { + right: 9px; + left: 9px; + height: 2px; + } + + .v2-ops-workspace.is-diagnostic { + display: grid; + min-height: 0; + grid-template-columns: minmax(176px, .34fr) minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + align-items: stretch; + gap: 5px; + overflow: hidden; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-mobile-discovery { + min-height: 0; + align-content: start; + grid-column: 1; + grid-row: 1; + } + + .v2-ops-workspace.is-diagnostic .v2-source-mobile-discovery > .v2-mobile-filter-toggle.semi-button { + height: 50px; + min-height: 50px; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-diagnostic.semi-card { + height: 100%; + min-height: 0; + grid-column: 2; + grid-row: 1; + overflow: auto; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-diagnostic > .semi-card-body { + height: 100%; + min-height: 0; + } + + .v2-ops-workspace.is-diagnostic .v2-source-empty.semi-empty, + .v2-ops-workspace.is-diagnostic .v2-source-loading { + height: calc(100% - 42px); + min-height: 120px; + padding: 12px; + } + + .v2-ops-workspace.is-diagnostic .v2-source-empty .semi-empty-image { + display: none; + } + + .v2-ops-workspace.is-diagnostic .v2-source-summary.semi-card-group { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +}