Fix actual Workspace Manager tile overflow source - PR 11.33

Author: DavidQ

docs/dev/codex_commands.md

@@ -2,38 +2,58 @@ MODEL: GPT-5.3-codex
 REASONING: medium
 
 TASK:
-Apply PR 11.32.
-
-Fix the Workspace Manager tool tile grid so tiles do not overflow the container when the browser width shrinks.
-
-Use responsive wrapping:
-- allow cards to wrap to fewer columns
-- down to one column on narrow widths
-- keep cards within container width
-- avoid fixed-width layouts that exceed the panel
-- use minmax/min-width: 0/box-sizing as needed
-- ensure long labels/status text does not force horizontal overflow
-
-Do NOT:
-- change tool data or payload logic
-- change palette handoff
-- change fullscreen behavior
-- change navigation behavior
-- touch start_of_day folders
-- add broad refactors
-
-Likely targets:
-- tools/shared/platformShell.js if styles are inline/generated there
-- related shared shell CSS/style block if tile grid styles live elsewhere
+Apply PR 11.33.
+
+PR 11.32 had no effect. The uploaded platformShell.css already shows responsive grid rules exist for:
+- .tools-platform-frame__nav
+- .tools-platform-frame__nav-grid
+
+Therefore do not just repeat the same grid rule.
+
+Find and fix the actual overflow source.
+
+Inspect rendered DOM/classes and CSS around Workspace Manager tiles. Check:
+1. Is the tile wrapper actually `.tools-platform-frame__nav-grid`?
+2. Are tile cards/grid items forcing min-content width?
+3. Are badges/links using `white-space: nowrap` and forcing card width?
+4. Are parent containers using fixed/calc widths that exceed viewport?
+5. Is the visible purple panel inside a wider `.tools-platform-frame`, `.wrap`, `.app`, or header constraint?
+6. Are sections/cards missing `min-width: 0` or `max-width: 100%`?
+7. Is horizontal overflow hidden on the wrong element only, leaving visual runoff?
+
+Required CSS behavior:
+- all Workspace Manager tile grid parents and children must have `min-width: 0`
+- tile cards must have `max-width: 100%` and `box-sizing: border-box`
+- long labels/status badges may wrap or ellipsize without increasing card width
+- grid must use a true responsive definition such as:
+  `grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));`
+  or equivalent
+- add a narrow-screen media rule if needed:
+  `grid-template-columns: 1fr;`
+- do not rely only on `overflow-x: hidden` as the fix; prevent the overflow source.
+
+Likely file:
+- tools/shared/platformShell.css
+
+Only touch platformShell.js if the generated markup is using the wrong class/wrapper.
 
 Validation:
 node --check tools/shared/platformShell.js
 node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --samples --sample-range=1902-1902 --tools
 
 Manual validation:
 Open sample 1902 -> Workspace Manager.
-Shrink browser width.
+Shrink browser width to match the screenshot.
 Confirm:
-- tile cards wrap inside the purple container
-- no horizontal runoff
-- grid can collapse to one column
+- no tile runoff beyond the right edge
+- cards wrap to fewer columns
+- cards can collapse to one column
+- labels/badges do not force overflow
+
+REPORT:
+Write docs/dev/reports/PR_11_33_validation.txt with:
+- changed files
+- actual overflow source found
+- why PR 11.32 had no effect
+- before/after manual validation
+- validation command results

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Make Workspace Manager tile grid wrap responsively - PR 11.32
+Fix actual Workspace Manager tile overflow source - PR 11.33

docs/dev/reports/PR_11_33_validation.txt

@@ -0,0 +1,38 @@
+PR 11.33 Validation Report (Updated)
+
+Changed files:
+- tools/shared/platformShell.css
+- docs/dev/reports/PR_11_33_validation.txt
+
+Actual overflow source found:
+- The overflow source was not the tile-grid column rule itself.
+- `.tools-platform-frame__accordion-content` is a grid with implicit `auto` track sizing, and its `.tools-platform-frame__bottomline` child contributed max-content width.
+- This caused `.tools-platform-frame__bottomline` -> `.tools-platform-frame__controls-stack` -> `.tools-platform-frame__nav` to compute around 1030px wide inside a ~705px header host.
+
+Why PR 11.32 had no effect:
+- PR 11.32 improved nav/grid internals, but parent grid-track sizing in `.tools-platform-frame__accordion-content` still allowed max-content expansion.
+- So child tiles could remain wider than the container even with responsive `nav` / `nav-grid` rules.
+
+Fix applied in this pass:
+- Constrained parent grid tracks:
+  - `.tools-platform-frame__accordion-content { grid-template-columns: minmax(0, 1fr); }`
+  - `.tools-platform-frame__controls-stack { grid-template-columns: minmax(0, 1fr); }`
+- Added width/min-width/max-width/box-sizing constraints on parent wrappers to prevent inherited expansion:
+  - `.tools-platform-frame__topline`, `.tools-platform-frame__bottomline`, `.tools-platform-frame__controls-stack`, `.tools-platform-frame__actions`, `.tools-platform-frame__shared-status`, `.tools-platform-frame__return-line`, `.tools-platform-frame__project`.
+- Kept previous child-level protections (row/link/badge constraints + narrow-screen one-column media rule).
+
+Before/after manual validation:
+- Before (captured by iframe DOM probe at 740px viewport):
+  - headerHost/clientWidth=705, scrollWidth=1041
+  - bottomline/clientWidth=1030
+  - nav/clientWidth=1030
+- After (same probe conditions):
+  - headerHost/clientWidth=705, scrollWidth=705
+  - bottomline/clientWidth=683
+  - nav/clientWidth=683
+- Manual browser check still required for visual confirmation in your session.
+
+Validation command results:
+- node --check tools/shared/platformShell.js -> PASS
+- node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --samples --sample-range=1902-1902 --tools -> PASS
+  - Summary: PASS=19 FAIL=0 TOTAL=19

docs/dev/reports/PR_11_33_validation_template.txt

@@ -0,0 +1,23 @@
+# PR 11.33 Validation
+
+Changed files:
+-
+
+Actual overflow source:
+-
+
+Why PR 11.32 had no effect:
+-
+
+Before:
+- Workspace Manager tiles overflowed past the right edge when browser width shrank.
+
+After:
+- Tiles remain inside the container and collapse to one column.
+
+Validation:
+- node --check tools/shared/platformShell.js
+- node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --samples --sample-range=1902-1902 --tools
+
+Manual:
+- sample 1902 -> Workspace Manager -> shrink browser width

docs/pr/PR_11_33_FIX_WORKSPACE_GRID_ACTUAL_OVERFLOW_SOURCE.md

@@ -0,0 +1,36 @@
+# PR 11.33 — Fix Workspace Grid Actual Overflow Source
+
+## Purpose
+Fix Workspace Manager tile overflow after PR 11.32 had no visible effect.
+
+## Observed Problem
+The tile grid still runs off the right edge of the purple Workspace Manager container when browser width shrinks.
+
+## Important Finding
+The CSS already contains responsive grid rules for:
+- `.tools-platform-frame__nav`
+- `.tools-platform-frame__nav-grid`
+
+So the overflow is likely not caused by the grid declaration alone. It is likely caused by one or more of:
+- parent/header width constraints
+- grid item min-content sizing
+- card/badge nowrap forcing min width
+- a generated wrapper not using `.tools-platform-frame__nav-grid`
+- fixed-width content inside nav buckets
+- external container clipping/overflow rules
+
+## Required Change
+Fix the actual overflow source so the Workspace Manager tile cards remain inside the container and collapse down to one column.
+
+## Scope
+- CSS/layout only.
+- Workspace Manager tile/status layout only.
+- Do not change tool data, payload logic, palette handoff, fullscreen behavior, or navigation behavior.
+- Do not touch start_of_day folders.
+
+## Acceptance
+- At narrow browser widths, tiles do not run off the purple container.
+- Cards wrap down to one column.
+- Tile text/badges do not force horizontal overflow.
+- Parent Workspace Manager panel does not force a wider-than-screen layout.
+- Runtime smoke test passes.

tools/shared/platformShell.css

@@ -105,12 +105,17 @@ body.tools-platform-surface {
 .tools-platform-frame__accordion-content {
   margin-top: 10px;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 10px;
 }
 
 .tools-platform-frame__topline,
 .tools-platform-frame__bottomline {
   display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__bottomline {
@@ -125,7 +130,12 @@ body.tools-platform-surface {
 
 .tools-platform-frame__controls-stack {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__eyebrow {
@@ -228,8 +238,9 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
 
 .tools-platform-frame__nav-tool-row {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
   gap: 6px;
   padding-bottom: 4px;
   margin-bottom: 4px;
@@ -248,17 +259,19 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
 }
 
 .tools-platform-frame__binding-badges {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 0;
   pointer-events: none;
   min-width: 0;
   max-width: 100%;
+  width: 100%;
+  flex: 1 1 100%;
 }
 
 .tools-platform-frame__binding-badge {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   min-height: 22px;
   padding: 0 8px;
@@ -268,10 +281,12 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   color: var(--muted, #e9ddff);
   background: rgba(43, 16, 91, 0.75);
   pointer-events: none;
+  width: 100%;
+  min-width: 0;
   max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .tools-platform-frame__binding-badge.is-active {
@@ -394,6 +409,10 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__return-line {
@@ -405,6 +424,10 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   margin-top: 8px;
   color: var(--muted, #e9ddff);
   text-align: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__return-copy strong {
@@ -435,6 +458,10 @@ body.tools-platform-workspace-context .tools-platform-frame__shared-status stron
   margin-top: 0;
   padding-top: 0;
   border-top: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__project-copy,
@@ -520,11 +547,21 @@ body.tools-platform-workspace-context .tools-platform-frame__shared-status stron
   padding: 6px 10px;
   color: var(--muted, #e9ddff);
   font-size: 0.88rem;
+  width: 100%;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  box-sizing: border-box;
+  justify-content: flex-start;
+}
+
+@media (max-width: 760px) {
+  .tools-platform-frame__nav,
+  .tools-platform-frame__nav-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .tools-platform-frame__nav-link.is-disabled {