fix(org-workbench, layout): narrow panes — roster auto-hides with a toggle, card contents actually contain

Tiled next to Search & Add the workbench misbehaved twice: the roster
kept its 300px in a pane that couldn't afford it, and the org card's
long link URLs and people rows ran past the card's right border — the
flex/grid min-width:auto trap (.ow-url had ellipsis styling that could
never engage because the item refused to shrink).

min-width:0 lands down the chain (card, lists-grid items, entry rows,
.ow-url with flex:1, person name/row), and the roster auto-hides below
860px with an always-available ◀/▶ orgs toggle overriding auto in
either direction. Browser-drive verified at 720px on the Sterling card:
0px card overflow, 0px link spill, no horizontal scroll, toggle
round-trips.

Closes #38.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UvYzx7vDWeafnkAi2nEQeb

Author: mpstaton

apps/org-workbench/src/App.svelte

@@ -72,6 +72,16 @@
   let creating = $state(false);
   let searchQuery = $state('');
 
+  // Roster responsiveness (gh #38): in a narrow tiling pane the roster's
+  // 300px is unaffordable — auto-hide below the threshold, with a manual
+  // ◀/▶ toggle that overrides the auto behavior in either direction.
+  const ROSTER_AUTO_HIDE_PX = 860;
+  let columnsWidth = $state(0);
+  let rosterManual = $state<boolean | null>(null);
+  const rosterVisible = $derived(
+    rosterManual ?? !(columnsWidth > 0 && columnsWidth < ROSTER_AUTO_HIDE_PX),
+  );
+
   function onCreateOpen(org_slug: string) {
     creating = false;
     void loadOrg(org_slug);
@@ -135,6 +145,14 @@
       <span class="ow-ws status-{status}">{status}</span>
     </div>
     <div class="ow-search-row">
+      <button
+        type="button"
+        class="ow-add-go"
+        title={rosterVisible ? 'Hide the org roster' : 'Show the org roster'}
+        onclick={() => (rosterManual = !rosterVisible)}
+      >
+        {rosterVisible ? '◀ orgs' : '▶ orgs'}
+      </button>
       <OrgSearch {client} onpick={onPick} onquery={(q) => (searchQuery = q)} />
       <button
         type="button"
@@ -156,8 +174,8 @@
     {/if}
   </header>
 
-  <div class="ow-columns">
-    {#if status === 'open'}
+  <div class="ow-columns" bind:clientWidth={columnsWidth}>
+    {#if status === 'open' && rosterVisible}
       <OrgRoster {client} activeSlug={org?.slug ?? null} onpick={(slug) => void loadOrg(slug)} />
     {/if}
     <main class="ow-body">

apps/org-workbench/src/app.css

@@ -71,7 +71,7 @@
 .ow-roster-counts { font-size: 0.72rem; color: var(--color-text-muted, #9aa0aa); }
 .ow-roster-corpus.zero { color: var(--color-error-text, #f3a3a3); font-weight: 600; }
 .ow-loading, .ow-empty-state { color: var(--color-text-muted, #9aa0aa); }
-.ow-card { border: 1px solid var(--color-border, #2a2c33); border-radius: 8px; background: var(--color-surface, #1c1e25); padding: 1rem 1.25rem; }
+.ow-card { border: 1px solid var(--color-border, #2a2c33); border-radius: 8px; background: var(--color-surface, #1c1e25); padding: 1rem 1.25rem; min-width: 0; overflow: hidden; }
 .ow-card-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
 .ow-card-name { margin: 0; font-size: 1.15rem; }
 .ow-card-slug { color: var(--color-text-muted, #9aa0aa); font-size: 0.8rem; }
@@ -81,6 +81,10 @@
 
 /* additive lists */
 .ow-lists { display: grid; gap: 1rem; margin-top: 1.1rem; }
+/* Flex/grid items default to min-width:auto and refuse to shrink — the
+   root of the narrow-pane spill (gh #38). Zero it down the chain so
+   ellipsis/wrapping can actually engage. */
+.ow-lists > * { min-width: 0; }
 .ow-list { border-top: 1px solid var(--color-border, #2a2c33); padding-top: 0.75rem; }
 .ow-list-head { display: flex; align-items: center; justify-content: space-between; }
 .ow-list-title { margin: 0; font-size: 0.9rem; }
@@ -97,9 +101,9 @@
 .ow-add-go:disabled { opacity: 0.6; cursor: default; }
 
 .ow-entries { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
-.ow-entry { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.85rem; }
+.ow-entry { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.85rem; min-width: 0; }
 .ow-kind { flex-shrink: 0; font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; background: var(--color-border, #2a2c33); color: var(--color-text-muted, #cfd3da); }
-.ow-url { color: var(--color-link, #8ab4f8); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ow-url { color: var(--color-link, #8ab4f8); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
 .ow-url:hover { text-decoration: underline; }
 .ow-date { margin-left: auto; flex-shrink: 0; color: var(--color-text-muted, #9aa0aa); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
 .ow-entry-action { flex-shrink: 0; font-size: 0.7rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border, #2a2c33); background: var(--color-bg, #14151a); color: var(--color-text-muted, #cfd3da); font-family: inherit; cursor: pointer; }
@@ -114,7 +118,8 @@
 .ow-people-list { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: grid; gap: 0.35rem; }
 .ow-person-row { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; background: var(--color-bg, #14151a); border: 1px solid var(--color-border, #2a2c33); border-radius: 6px; color: inherit; font: inherit; padding: 0.45rem 0.7rem; cursor: pointer; }
 .ow-person-row:hover { background: var(--color-border, #2a2c33); }
-.ow-person-name { font-size: 0.88rem; }
+.ow-person-row { min-width: 0; }
+.ow-person-name { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .ow-person-role { color: var(--color-text-muted, #9aa0aa); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ow-person-relevance { flex-shrink: 0; font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; background: var(--color-ok-bg, #173a26); color: var(--color-ok-text, #6ee7a8); font-variant-numeric: tabular-nums; }
 .ow-person-meta { margin-left: auto; flex-shrink: 0; color: var(--color-text-muted, #9aa0aa); font-size: 0.72rem; }

context-v/issues/Org-Workbench-Narrow-Layout-Roster-Doesnt-Collapse-Card-Contents-Spill.md

@@ -7,15 +7,17 @@ authors:
   - Michael Staton
 augmented_with:
   - Claude Code on Claude Fable 5
-semantic_version: 0.0.0.1
+semantic_version: 0.0.0.2
 tags:
   - Issue
   - Usability
   - Augment-It
   - Org-Workbench
   - Layout
   - CSS
-status: Open
+status: Shipped
+date_first_published: 2026-07-24
+post_ship_note: "Shipped 2026-07-24 — min-width:0 down the card's flex/grid chain (+ .ow-url flex:1 so ellipsis engages), roster auto-hides under 860px with the ◀/▶ orgs toggle. Browser-drive verified at 720px on the Sterling card: 0px card overflow, 0px link spill, toggle round-trips. gh #38 closed."
 ---
 
 # Narrow-pane workbench: roster hogs, card spills