From 8808e8825b4877ced73b66714fcb425ad99cc486 Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 12:18:42 -0700
Subject: [PATCH 1/3] fix(ui-core): the schema and gallery action rows wrap
 instead of widening the page

Both rows put Nova buttons in a row that could not give. The schema's note field
is 224px and its two controls another 220 with the gaps, which comes to 460 and
stops fitting somewhere around 500px; the gallery's batch actions did the same a
little later. Measured against the running stack, the schema overflowed the
document by 204px at 320, 149 at 375 and 44 at 480, and the gallery by 118 and
63 - the residual width both surfaces were carrying into this phase.

A button that shrinks is a button whose label truncates, so `shrink-0` on the
primitive is right and the row is the thing that had to change. Both now wrap,
and the schema's note takes the full width while it is wrapped and its own 224
once the row fits again.

The gallery's state filter needed the other answer. It is one joined pill of
five segments, 324px wide, so it is wider than the narrowest viewport on its own
and wrapping inside the pill would break the control rather than fit it. It
scrolls within its own row, which is what the project navigation does with the
same shape at the same width.
---
 frontend/ui-core/src/screens/GalleryScreen.tsx | 13 ++++++++++++-
 frontend/ui-core/src/screens/SchemaEditor.tsx  |  8 ++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/ui-core/src/screens/GalleryScreen.tsx b/frontend/ui-core/src/screens/GalleryScreen.tsx
index ae416f6f..7eab3c71 100644
--- a/frontend/ui-core/src/screens/GalleryScreen.tsx
+++ b/frontend/ui-core/src/screens/GalleryScreen.tsx
@@ -708,7 +708,10 @@ function BatchHeader({
           />
         </div>
 
-        <div className="flex items-center gap-2">
+        {/* Wraps rather than widening the page. Every control here is one a
+            batch's state offers, so none may be dropped at a narrow width; they
+            take a second line instead. */}
+        <div className="flex flex-wrap items-center gap-2">
           {/*
             Draft only, and it opens the dialog rather than sending anything:
             approval carries a partition, pins the schema and cuts the jobs, and
@@ -997,6 +1000,13 @@ function Toolbar({
     >
       {showSegments && (
         <>
+          {/* The row above already wraps, but the control is one joined pill and
+              is wider than the narrowest viewport on its own. It scrolls within
+              its own row rather than widening the page — the project navigation's
+              answer to the same shape — because squashing five state filters
+              costs more than a scroll does. The padding pair keeps the focus ring
+              off the scroller's clip. */}
+          <div className="max-w-full overflow-x-auto pb-1.5 -mb-1.5">
           <div
             className="inline-flex rounded-md border border-border p-0.5"
             role="group"
@@ -1022,6 +1032,7 @@ function Toolbar({
               </button>
             ))}
           </div>
+          </div>
 
           <label className="flex items-center gap-2 text-xs text-muted-foreground">
             Order
diff --git a/frontend/ui-core/src/screens/SchemaEditor.tsx b/frontend/ui-core/src/screens/SchemaEditor.tsx
index c1bf9a8c..028b3906 100644
--- a/frontend/ui-core/src/screens/SchemaEditor.tsx
+++ b/frontend/ui-core/src/screens/SchemaEditor.tsx
@@ -709,8 +709,11 @@ export function SchemaEditor({
             now"; there is no now — a published version is immutable, and the
             navigator is the way back to the one that can be edited. Rendering it
             greyed would also leave it in the DOM, where a test could click it. */}
+        {/* The row wraps rather than widening the page: the note field and the
+            two controls come to 460px, which stops fitting below about 500px.
+            Nova buttons do not shrink, by design, so the row is what gives. */}
         {past === undefined && (
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
           {/* Optional, and unlabelled beyond its placeholder because it is one
               field: a version's commit message, written once at publish. There is
               no edit path for it afterwards, so this is the only place it exists. */}
@@ -718,7 +721,8 @@ export function SchemaEditor({
             aria-label="Why this version"
             placeholder="Why this version? (optional)"
             data-testid="version-note"
-            className="w-56"
+            // Full width while the row is wrapped, its own width once the row fits.
+            className="w-full min-w-0 sm:w-56"
             disabled={draftLocked}
             value={note}
             onChange={(event) => {

From 4f399812b3aeca9762203d97c459f20a34cd105b Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 12:18:52 -0700
Subject: [PATCH 2/3] fix(ui-core): home's resume control and the dataset tabs
 stop widening the page

Two more of the same defect, found by sweeping every product route rather than
the two that were already known. Home's resume row put a thumbnail, a column of
counts and a 178px control on one line and overflowed by 35px at 320. The dataset
tabs overflowed by 33: each trigger carries a label and a count, so `flex-1`
cannot shrink it past its own content.

Home's row wraps. The tab strip scrolls inside its row instead, for the reason
the project navigation's does - a tab that truncates its label to fit is a tab
nobody can read, and the strip is the product's one tab shape rather than a
composition this screen is free to restyle.
---
 frontend/ui-core/src/screens/DatasetScreen.tsx | 11 ++++++++++-
 frontend/ui-core/src/screens/HomeScreen.tsx    |  4 +++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/ui-core/src/screens/DatasetScreen.tsx b/frontend/ui-core/src/screens/DatasetScreen.tsx
index 4309c7d0..9a182eea 100644
--- a/frontend/ui-core/src/screens/DatasetScreen.tsx
+++ b/frontend/ui-core/src/screens/DatasetScreen.tsx
@@ -184,7 +184,15 @@ export function DatasetScreen({ projectId, tab, onTabChange }: DatasetScreenProp
       >
         {/* The product's one tab shape — a row on a full-width hairline, the
             active tab's rule sitting on it — with the count as a chip beside the
-            two views whose size is the first thing anybody asks. */}
+            two views whose size is the first thing anybody asks.
+
+            The strip scrolls within its own row rather than widening the page,
+            which is what the project navigation does at the same width and for
+            the same reason: a trigger carries a label and a count, so it has a
+            width it cannot shrink past, and truncating the labels would cost
+            more than a scroll does. The padding pair keeps the focus ring off
+            the scroller's clip. */}
+        <div className="min-w-0 overflow-x-auto pb-1.5 -mb-1.5">
         <TabsList variant="line">
           <TabsTrigger value="overview" data-testid="dataset-tab-overview">
             Overview
@@ -198,6 +206,7 @@ export function DatasetScreen({ projectId, tab, onTabChange }: DatasetScreenProp
             {releases.data !== undefined && <Badge>{releases.data.total}</Badge>}
           </TabsTrigger>
         </TabsList>
+        </div>
 
         <TabsContent value="overview">
         <Async query={stats} loadingRows={3}>
diff --git a/frontend/ui-core/src/screens/HomeScreen.tsx b/frontend/ui-core/src/screens/HomeScreen.tsx
index 936fc7c1..c818b904 100644
--- a/frontend/ui-core/src/screens/HomeScreen.tsx
+++ b/frontend/ui-core/src/screens/HomeScreen.tsx
@@ -301,7 +301,9 @@ function Resume({
       data-kind={resume.kind}
     >
       <h2 className="text-xs font-medium text-muted-foreground">Continue where you left off</h2>
-      <div className="flex items-center gap-4">
+      {/* The resume control keeps its own width and wraps below the thumbnail
+          and the counts rather than pushing the page wider. */}
+      <div className="flex flex-wrap items-center gap-4">
         {resume.thumbnail_asset_id !== null && (
           <div className="size-16 shrink-0 overflow-hidden rounded-sm">
             <AssetThumbnail

From c46fecb445465fea824eadb60ec99cc47cea4fb3 Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 12:19:04 -0700
Subject: [PATCH 3/3] test(e2e): guard the project routes against
 document-level horizontal overflow

Five scenarios, one per route, at 320, 375 and 480. All four fixes in this branch
were found by measuring rather than by looking, and without a guard the next
fixed-width row puts the scrollbar back.

The assertion is on the document, not on elements: a local scroller that does not
widen the page is not a defect, and this file's own navigation strip is
deliberately one. An element-level check would have to special-case it, and would
have called the dataset tab strip broken after this branch fixed it.

One test per route rather than one sweep over fifteen navigations, which runs past
the suite's 20s budget and reports a timeout where it means the test did too much.
Verified by breaking it: with the wrap fixes reverted, schema and the batch detail
fail with the width that broke them, and both pass again restored.
---
 frontend/app/e2e/project-nav.spec.ts | 45 ++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/frontend/app/e2e/project-nav.spec.ts b/frontend/app/e2e/project-nav.spec.ts
index eff287d0..cce75f25 100644
--- a/frontend/app/e2e/project-nav.spec.ts
+++ b/frontend/app/e2e/project-nav.spec.ts
@@ -315,3 +315,48 @@ test("the column's items are real links, so the section has an address before it
   await expect(page.getByTestId("schema-editor")).toBeVisible();
   await expect(page.getByTestId("nav-schema")).toHaveAttribute("aria-current", "page");
 });
+
+/**
+ * The product's responsive floor, asserted rather than eyeballed.
+ *
+ * A page that scrolls sideways is a defect; a *local* scroller that does not
+ * widen the page is not, and this file's own strip is deliberately one. So the
+ * assertion is on the document, which is the thing a user drags.
+ *
+ * Every width here caught something real: the schema's action row came to 460px
+ * and overflowed to about 500px, the dataset tabs could not shrink past their
+ * labels and counts, and the gallery's batch actions and its state filter each
+ * widened the page on their own. A regression in any of them is a sideways
+ * scrollbar on a screen somebody works in all day.
+ *
+ * One test per route rather than one sweep: fifteen navigations in a single test
+ * runs past the suite's 20s budget, and a timeout reads as "the floor is broken"
+ * when it means "the test did too much".
+ */
+const FLOOR_WIDTHS = [320, 375, 480] as const;
+
+for (const route of [...SECTIONS, "batches-detail"] as const) {
+  const path =
+    route === "batches-detail"
+      ? `/projects/${PROJECT}/batches/${BATCH}`
+      : `/projects/${PROJECT}/${route}`;
+
+  test(`${route} does not scroll the document sideways at the responsive floor`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: FLOOR_WIDTHS[0], height: 800 });
+    await openCold(page, path);
+    await expect(page.getByTestId("project-tabs")).toBeVisible();
+
+    for (const width of FLOOR_WIDTHS) {
+      await page.setViewportSize({ width, height: 800 });
+      const overflow = await page.evaluate(() => {
+        const de = document.documentElement;
+        return de.scrollWidth - de.clientWidth;
+      });
+      expect(overflow, `${path} at ${width}px scrolls the document sideways`).toBeLessThanOrEqual(
+        0,
+      );
+    }
+  });
+}