Panel sections that fold and fill cleanly, a shaded canvas well, and light by default

.claude/skills/ui-chrome/SKILL.md

@@ -60,7 +60,9 @@ Two more worth keeping straight. **A strip holds one tab or two** — `grid-auto
 
 Below `WINDOW_MIN_ROWS` the list is drawn whole, spacers and measurement included, so the small-machine path is exactly what it was.
 
-**The docked left panel gives its spare height to one list.** Every list is capped at `--lp-list-max-h`, which left ten transitions scrolling in a 168px box above two hundred pixels of empty panel. `syncDockFill(side)` in [js/panel-sections-ui.js](../../../js/panel-sections-ui.js) marks the *last* open section that declares a `fill` region, and that region takes the leftover — the cap becomes its floor, so a panel with no room scrolls exactly as it did. The last, because growing it moves nothing but the collapsed headers under it. It is asked of the DOM on every collapse, reorder, tear-off, dock and machine switch, because an id stopped being the right key the moment sections could move (it used to be `#lp-transitions { flex: 1 }`). The region is `flex: 1 1 0`, sized to the leftover alone: a windowed list slices its rows from its own height, and a box as tall as its content would draw every row. Left panel only (`dockFill` in the registry) — the right panel's regions are drawn boxes, and a stretched trace log is a tall empty card.
+**The docked left panel gives its spare height to one list.** Every list is capped at `--lp-list-max-h`, which left ten transitions scrolling in a 168px box above two hundred pixels of empty panel. `syncDockFill(side)` in [js/panel-sections-ui.js](../../../js/panel-sections-ui.js) marks the *last* open section that declares a `fill` region, and that region may grow past the cap into the leftover — **as far as its own rows reach, and no further**. It used to take the leftover whatever it held, so folding Transitions left five states standing over five hundred pixels of empty panel with the folded header pinned to the bottom edge. The section is `flex: 0 1 auto` (content-sized, shrinking only when its rows are taller than the room) and a windowed list is still bounded: its spacers make it tall, the shrink takes it back to the leftover, and it slices its window from that. It is asked of the DOM on every collapse, reorder, tear-off, dock and machine switch, because an id stopped being the right key the moment sections could move (it used to be `#lp-transitions { flex: 1 }`).
+
+The floors are **published by `publishListHeight` in [js/panel-list.js](../../../js/panel-list.js)**, not left to the browser, and that is the part easy to undo. The list's floor (`--lw-floor`) is the cap or its own height, whichever is less — not a size CSS can take from a scroll container. The section's (`--dock-fill-min`) is that plus its header and search row, because a flex or grid item's automatic minimum is its *content's* height: without it a 200-state list held the section at twelve thousand pixels and the panel scrolled instead of the list. The section floor is measured with the old one lifted, or a stale floor reads itself back as padding. The Blocks list is not drawn by `panel-list.js` and calls `publishListHeight` itself. Left panel only (`dockFill` in the registry) — the right panel's regions are drawn boxes, and a stretched trace log is a tall empty card.
 
 **A tab name is an element, not a text node.** `text-overflow` has nothing to apply to on the anonymous flex item a loose string becomes, so `.panel-tab-label` is what ellipsizes; before it, a name simply drew over the next tab, since the tracks are `minmax(0, 1fr)` and a tab is *allowed* to be narrower than its own text. Below 300px — measured by `@container`, because these panels are resized and pinned independently of the window — the tab icon is dropped rather than the words, two glyphs that repeat the names being cheaper to lose than the ends of both names.
 

css/chrome-polish.css

@@ -46,9 +46,16 @@
 .lp-section-header:hover,
 .rp-section-header:hover { background: color-mix(in srgb, var(--surface) 78%, transparent); }
 
+/* No `scrollbar-gutter: stable`. A reserved gutter is outside the scrollport,
+   where nothing inside can paint, so every section rule and every header's
+   hover fill stopped ~10px short of the panel edge while the panel header's
+   rule above them ran the full width. And the strip was nearly always empty:
+   the docked panel hands its spare height to one list (syncDockFill) rather
+   than overflowing, so the bar only appears once the open sections really are
+   taller than the panel — and then it takes its width beside them the
+   ordinary way. */
 .lpanel-content,
 .rpanel-content {
-  scrollbar-gutter: stable;
   scrollbar-color: var(--sb-thumb) transparent;
 }
 

css/modals.css

@@ -3235,6 +3235,9 @@ button.sm-stat:disabled {
   background: var(--surface);
   border: 1px solid var(--border2);
   border-radius: 20px;
+  /* The one piece of floating canvas chrome without a shadow: the toolbox,
+     the minimap, the zoom bar and the scope bar all lift off the well. */
+  box-shadow: var(--shadow-sm);
   color: var(--text2);
   pointer-events: none;
   opacity: 0;