Harden mobile workbench overflow

frontend/README.md

@@ -285,6 +285,8 @@ The frontend API client uses same-origin requests by default. In Docker Compose,
 
 The QA/QC workspace promotes core metrics into evidence cards before the raw metric list, keeping precision, recall, F1, mean IoU and false positive/negative counts scan-friendly while preserving the persisted raw metrics.
 
+The workbench shell clamps page-level horizontal overflow on mobile while keeping the sidebar and workspace shortcut rows intentionally scrollable. Long QA identifiers and inspector values wrap inside their cards instead of widening the viewport.
+
 ## Useful repository scripts
 
 - `bash scripts/frontend_install.sh`

frontend/src/styles/app.css

@@ -25,10 +25,12 @@
 }
 
 html {
+  overflow-x: hidden;
   background: var(--bg);
 }
 
 body {
+  overflow-x: hidden;
   margin: 0;
   font-family: Inter, 'Avenir Next', 'Segoe UI', sans-serif;
   color: var(--text);
@@ -39,6 +41,11 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+.workbench-shell {
+  max-width: 100vw;
+  overflow-x: clip;
+}
+
 button,
 input,
 select,
@@ -514,7 +521,8 @@ section li strong + div {
 
 .workbench-shell {
   width: 100%;
-  max-width: none;
+  max-width: 100vw;
+  overflow-x: clip;
   padding: 0;
   background: #eef4f1;
 }
@@ -579,10 +587,13 @@ section li strong + div {
   gap: 0;
   height: calc(100vh - 4.35rem);
   min-height: 42rem;
+  max-width: 100vw;
+  min-width: 0;
 }
 
 .workbench-sidebar,
 .workbench-inspector {
+  min-width: 0;
   min-height: 0;
   overflow: auto;
   border-color: var(--line);
@@ -640,6 +651,7 @@ section li strong + div {
 .workbench-main {
   min-width: 0;
   min-height: 0;
+  max-width: 100%;
   overflow: auto;
   padding: 0.9rem 1.05rem 1.15rem;
 }
@@ -1066,6 +1078,7 @@ button.entity-card {
 .export-card,
 .latest-export-card,
 .empty-state {
+  min-width: 0;
   padding: 0.85rem;
 }
 
@@ -1270,6 +1283,7 @@ button.entity-card {
 .quality-dataset-name,
 .quality-check-dataset-link {
   overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .quality-dataset-name {
@@ -1301,7 +1315,13 @@ button.entity-card {
   font-size: 0.9rem;
   line-height: 1.25;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+}
+
+.quality-score-row strong,
+.inspector-field strong {
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .quality-metric-section {
@@ -1710,11 +1730,17 @@ button.entity-card {
 .workbench-inspector-panel {
   display: grid;
   gap: 0.68rem;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .inspector-header {
   display: grid;
   gap: 0.2rem;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .inspector-header h2 {
@@ -1734,12 +1760,14 @@ button.entity-card {
 }
 
 .inspector-tab {
+  min-width: 0;
   min-height: 2.2rem;
   padding: 0.38rem 0.42rem;
   background: #ffffff;
   box-shadow: none;
   font-size: 0.78rem;
   line-height: 1.2;
+  overflow-wrap: anywhere;
 }
 
 .inspector-tab-active {
@@ -1882,6 +1910,7 @@ button.entity-card {
     position: sticky;
     top: 5.8rem;
     z-index: 10;
+    max-width: 100vw;
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }
@@ -1941,16 +1970,26 @@ button.entity-card {
     padding: 0.75rem;
   }
 
+  .workbench-inspector {
+    overflow-x: hidden;
+  }
+
   .context-bar,
   .quick-action-grid,
   .workspace-nav-cluster {
     grid-template-columns: 1fr;
   }
 
+  .inspector-tabs {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .workbench-sidebar nav {
     display: flex;
     gap: 0.5rem;
+    max-width: 100%;
     overflow-x: auto;
+    overscroll-behavior-x: contain;
     padding-bottom: 0.2rem;
   }
 
@@ -1961,7 +2000,9 @@ button.entity-card {
   .workspace-nav-cluster {
     display: flex;
     flex-wrap: nowrap;
+    max-width: 100%;
     overflow-x: auto;
+    overscroll-behavior-x: contain;
     padding-bottom: 0.1rem;
   }