Make Workspace Manager tile grid wrap responsively - PR 11.32. Fix actual Workspace Manager tile overflow source - PR 11.33

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,26 +1,39 @@
 MODEL: GPT-5.3-codex
-REASONING: low
+REASONING: medium
 
 TASK:
-Apply PR 11.31.
+Apply PR 11.32.
 
-Locate the PREV/NEXT navigation label rendering in Workspace Manager.
+Fix the Workspace Manager tool tile grid so tiles do not overflow the container when the browser width shrinks.
 
-Update styling for the tool name text:
-- increase font size (e.g., 1.2x–1.4x current or equivalent px/em bump)
-- set color to #3600af
+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 navigation logic
-- change payload logic
-- change layout containers
-- add new components
+- 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
 
 Validation:
 node --check tools/shared/platformShell.js
+node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --samples --sample-range=1902-1902 --tools
 
-Manual:
-Open Workspace Manager
-Verify PREV/NEXT tool name:
-- larger font
-- color #3600af
+Manual validation:
+Open sample 1902 -> Workspace Manager.
+Shrink browser width.
+Confirm:
+- tile cards wrap inside the purple container
+- no horizontal runoff
+- grid can collapse to one column

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Increase PREV/NEXT label font size and apply color #3600af - PR 11.31
+Make Workspace Manager tile grid wrap responsively - PR 11.32

docs/dev/reports/PR_11_32_validation_template.txt

@@ -0,0 +1,20 @@
+# PR 11.32 Validation
+
+Changed files:
+-
+
+Root cause:
+-
+
+Before:
+- Workspace Manager tiles overflowed horizontally when browser/container width shrank.
+
+After:
+- Tiles wrap within the container and collapse down 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_32_WORKSPACE_TILE_GRID_RESPONSIVE_WRAP.md

@@ -0,0 +1,22 @@
+# PR 11.32 — Workspace Tile Grid Responsive Wrap
+
+## Purpose
+Fix Workspace Manager tool tiles overflowing horizontally when the browser/container width shrinks.
+
+## Problem
+The tool category tiles run past the right edge of the Workspace Manager panel instead of wrapping within the available container width.
+
+## Required Change
+Update the Workspace Manager tile grid layout so tiles wrap responsively down to one column.
+
+## Scope
+- Layout/CSS/rendering only for Workspace Manager tile grids.
+- Do not change tool data, payload logic, palette handoff, fullscreen behavior, or navigation behavior.
+- Do not touch start_of_day folders.
+
+## Acceptance
+- Tool tiles stay inside the Workspace Manager container at narrow widths.
+- Grid wraps from multiple columns down to one column.
+- No horizontal overflow from tile cards.
+- Existing tool labels/status pills remain readable.
+- Runtime smoke test passes.

tools/shared/platformShell.css

@@ -199,11 +199,13 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   border-radius: 12px;
   background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
   box-shadow: var(--tools-shell-shadow);
-  min-width: 220px;
+  min-width: 0;
   min-height: 120px;
   height: auto;
   align-self: stretch;
   justify-content: flex-start;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__nav-bucket-title {
@@ -221,6 +223,7 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   gap: 6px;
   flex-wrap: nowrap;
   flex-direction: column;
+  min-width: 0;
 }
 
 .tools-platform-frame__nav-tool-row {
@@ -231,6 +234,7 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   padding-bottom: 4px;
   margin-bottom: 4px;
   border-bottom: 0;
+  min-width: 0;
 }
 
 .tools-platform-frame__nav-tool-row:last-child {
@@ -249,6 +253,8 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   gap: 6px;
   margin: 0;
   pointer-events: none;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .tools-platform-frame__binding-badge {
@@ -262,6 +268,10 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
   color: var(--muted, #e9ddff);
   background: rgba(43, 16, 91, 0.75);
   pointer-events: none;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tools-platform-frame__binding-badge.is-active {
@@ -280,13 +290,16 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
 
 .tools-platform-frame__nav {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
   grid-auto-rows: auto;
   gap: 12px;
   align-items: start;
   align-content: start;
   justify-items: stretch;
   width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__nav.is-workspace-locked {
@@ -340,6 +353,7 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
 .tools-platform-frame__nav-section {
   display: grid;
   gap: 10px;
+  min-width: 0;
 }
 
 .tools-platform-frame__nav > .tools-platform-frame__nav-section,
@@ -357,13 +371,16 @@ body.tools-platform-workspace-context .tools-platform-frame__description {
 
 .tools-platform-frame__nav-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
   grid-auto-rows: auto;
   gap: 12px;
   align-items: start;
   align-content: start;
   justify-items: stretch;
   width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 .tools-platform-frame__divider--nav-split {
@@ -503,6 +520,11 @@ body.tools-platform-workspace-context .tools-platform-frame__shared-status stron
   padding: 6px 10px;
   color: var(--muted, #e9ddff);
   font-size: 0.88rem;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tools-platform-frame__nav-link.is-disabled {