feat: focus operations review queue

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -16180,6 +16180,207 @@
   min-width: 908px;
 }
 
+/*
+ * Shared Semi UI queue metrics.
+ * Keep operational evidence in one compact rail so the result list remains
+ * the visual and interaction focus.
+ */
+.v2-workspace-metric-rail.is-queue.semi-card {
+  overflow: hidden;
+  border: 0;
+  border-bottom: 1px solid #e1e8f0;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: none;
+}
+
+.v2-workspace-metric-rail.is-queue > .semi-card-body {
+  display: grid;
+  min-height: 58px;
+  grid-template-columns: minmax(0, 1fr) 218px;
+}
+
+.v2-workspace-metric-list {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 1.15fr 1.15fr .9fr .9fr;
+}
+
+.v2-workspace-metric-list > span {
+  display: grid;
+  min-width: 0;
+  min-height: 58px;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-content: center;
+  column-gap: 10px;
+  padding: 7px 13px;
+}
+
+.v2-workspace-metric-list > span + span {
+  border-left: 1px solid #e5ebf2;
+}
+
+.v2-workspace-metric-list > span > small {
+  grid-column: 1;
+  color: #78879a;
+  font-size: 9px;
+  font-weight: 650;
+  line-height: 14px;
+  white-space: nowrap;
+}
+
+.v2-workspace-metric-list > span > strong {
+  grid-column: 1;
+  color: #243950;
+  font-size: 21px;
+  font-variant-numeric: tabular-nums;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+.v2-workspace-metric-list > span > em {
+  align-self: center;
+  grid-column: 2;
+  grid-row: 1 / 3;
+  overflow: hidden;
+  color: #8a97a8;
+  font-size: 9px;
+  font-style: normal;
+  line-height: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-workspace-metric-list > span.is-secondary > strong {
+  font-size: 17px;
+}
+
+.v2-workspace-metric-list > span.is-primary {
+  background: linear-gradient(145deg, #edf5ff 0%, #f8fbff 100%);
+  box-shadow: inset 0 -3px #1f6feb;
+}
+
+.v2-workspace-metric-list > span.is-primary > :is(small, strong) {
+  color: #155fc5;
+}
+
+.v2-workspace-metric-list > span.is-danger {
+  background: linear-gradient(145deg, #fff 0%, #fff8f7 100%);
+  box-shadow: inset 0 -3px #e2554f;
+}
+
+.v2-workspace-metric-list > span.is-danger > :is(small, strong) {
+  color: #c2413d;
+}
+
+.v2-workspace-metric-list > span.is-success > :is(small, strong) {
+  color: #148459;
+}
+
+.v2-workspace-metric-list > span.is-warning > :is(small, strong) {
+  color: #a76512;
+}
+
+.v2-workspace-metric-context {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  border-left: 1px solid #e5ebf2;
+  background: #fbfcfe;
+  padding: 7px 13px;
+}
+
+.v2-workspace-metric-context > span {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+  gap: 1px 6px;
+}
+
+.v2-workspace-metric-context small {
+  color: #8491a2;
+  font-size: 9px;
+}
+
+.v2-workspace-metric-context strong {
+  color: #2f5f9b;
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+.v2-workspace-metric-context em {
+  grid-column: 1 / -1;
+  overflow: hidden;
+  color: #929eac;
+  font-size: 8px;
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-reconcile-metric-rail {
+  flex: 0 0 auto;
+}
+
+@media (min-width: 681px) {
+  .v2-reconcile-heading.v2-workspace-panel-header {
+    min-height: 62px;
+    padding-block: 9px;
+  }
+
+  .v2-reconcile-toolbar {
+    padding-block: 8px;
+  }
+}
+
+@media (max-width: 900px) {
+  .v2-workspace-metric-rail.is-queue > .semi-card-body {
+    grid-template-columns: minmax(0, 1fr) 180px;
+  }
+
+  .v2-workspace-metric-list > span {
+    column-gap: 6px;
+    padding-inline: 9px;
+  }
+}
+
+@media (max-width: 680px) {
+  .v2-workspace-metric-rail.is-queue > .semi-card-body {
+    min-height: 56px;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .v2-workspace-metric-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .v2-workspace-metric-list > span {
+    min-height: 56px;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 8px;
+    padding: 6px 12px;
+  }
+
+  .v2-workspace-metric-list > span.is-secondary {
+    display: none;
+  }
+
+  .v2-workspace-metric-list > span > strong {
+    font-size: 19px;
+    line-height: 22px;
+  }
+
+  .v2-workspace-metric-list > span > em {
+    font-size: 8px;
+  }
+
+  .v2-workspace-metric-context {
+    display: none;
+  }
+}
+
 .v2-reconcile-issue-cell > span {
   display: flex;
   min-width: 0;
@@ -21899,10 +22100,35 @@
     padding: 8px;
   }
 
+  .v2-reconcile-detail-sidesheet .v2-workspace-config-summary {
+    min-height: 104px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .v2-reconcile-detail-sidesheet .v2-workspace-config-summary > span:last-child {
+    min-height: 38px;
+    grid-column: 1 / -1;
+    grid-template-columns: auto auto minmax(0, 1fr);
+    align-items: baseline;
+    align-content: center;
+    column-gap: 8px;
+    padding-block: 6px;
+  }
+
+  .v2-reconcile-detail-sidesheet .v2-workspace-config-summary > span:last-child :is(small, strong, em) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .v2-reconcile-detail-sidesheet .v2-workspace-config-summary > span:first-child strong,
   .v2-reconcile-detail-sidesheet .v2-workspace-config-summary > span:nth-child(2) strong {
     font-size: 11px;
   }
+
+  .v2-reconcile-detail-sidesheet .v2-workspace-config-summary > span:last-child strong {
+    font-size: 10px;
+  }
 }
 
 @media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {