fix(sessions): the label-collapse thresholds were too low, not just mis-commented

Review flagged the comments: they still said "a fifth button" and "five labelled
buttons ... ~300px" next to a row that now renders six. Correct — and going to
fix the wording turned up a real bug behind it.

MEASURED the shipped styling in headless Chrome, six labels rendered:

  chat.html          434px    padding 0 9px, 11.5px text, gap 6, 1px border
  sessionsView.html  363px    padding 0 8px, 11px   text, gap 4, no border

The thresholds were 420 and 400. So chat.html had a 14px band — content widths
between 420 and 434 — where the labels were still painted and the nowrap row
spilled out of the card. Exactly the failure the guard was added to prevent,
reintroduced by raising the button count without re-measuring. Now 460 and 390,
both above the need with room for a wider system font.

The comments are rewritten with the real numbers and a note to re-measure when
adding a button.

The test is rewritten to assert the RELATIONSHIP rather than a regex shape. It
now parses the threshold and requires it to be >= the measured need, so a
seventh button fails until someone re-measures, and the message says why:

  chat.html: labels collapse at 420px but six labelled buttons need 434px —
  between those widths the labels paint and the nowrap row overflows the card

Boundary verified: 433 rejected, 434 accepted, and the 420 that shipped rejected.
All 32 suites green.

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -1107,12 +1107,16 @@
   .sesscard .sessline2 { margin-top: 4px; min-height: 26px; display: flex; align-items: center; }
   .sesscard .sesssub { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
   /* The action row is nowrap by design (the card is two fixed-height lines — nothing may reflow), so
-     a fifth button cannot be allowed to overflow a narrow sidebar. Below the width where five
-     labelled buttons fit, the labels drop and the row becomes icon-only: ~184px instead of ~300px.
+     a button that does not fit OVERFLOWS the card rather than wrapping. Six labelled buttons
+     (Rename · Fork · Copy · Done · Delete · Pin) measure 434px at this styling; icon-only they are
+     ~200px. The threshold therefore has to sit ABOVE 434, not below it — at 420 there was a band of
+     widths where the labels were still painted and the row spilled out of the card. 460 leaves room
+     for a wider system font.
      `title` + `aria-label` are on every button already, so nothing is lost to a pointer or a screen
-     reader — only to the eye, and only when there is no room for it. */
+     reader — only to the eye, and only when there is no room for it.
+     ADDING A BUTTON? Re-measure and raise this; test/webviewCss.test.js pins the floor. */
   .sesscard { container-type: inline-size; }
-  @container (max-width: 420px) { .sesscard .sesslbl { display: none; } }
+  @container (max-width: 460px) { .sesscard .sesslbl { display: none; } }
   .sesscard .sessacts { display: none; align-items: center; gap: 6px; flex-wrap: nowrap; }
   .sesscard:hover .sesssub, .sesscard:focus-within .sesssub { display: none; }
   .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { display: flex; }

extensions/levelcode-ai/media/sessionsView.html

@@ -87,11 +87,13 @@
      left intact. Sidebar buttons are label-only (icon hidden) to stay compact in a narrow panel. */
   .sesscard .sessline2 { margin: 2px 0 0 16px; min-height: 22px; display: flex; align-items: center; }
   .sesscard .sesssub { font-size: 12px; color: var(--cc-text3); }
-  /* Same reasoning as chat.html: the row is nowrap, so a fifth button must not overflow a narrow
-     pane. Below the width where five labelled buttons fit, drop to icons — title + aria-label are
-     already on every button, so only the eye loses anything, and only when there is no room. */
+  /* Same reasoning as chat.html, different numbers — this pane's buttons are smaller (22px tall,
+     8px padding, 11px text, no border), so six labelled ones measure 363px rather than 434px. The
+     threshold sits above that; below it the row drops to icons, keeping title + aria-label, so only
+     the eye loses anything and only when there is no room.
+     ADDING A BUTTON? Re-measure and raise this; test/webviewCss.test.js pins the floor. */
   .sesscard { container-type: inline-size; }
-  @container (max-width: 400px) { .sesscard .sesslbl { display: none; } }
+  @container (max-width: 390px) { .sesscard .sesslbl { display: none; } }
   .sesscard .sessacts { display: none; align-items: center; gap: 4px; flex-wrap: nowrap; }
   .sesscard:hover .sesssub, .sesscard:focus-within .sesssub { display: none; }
   .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { display: flex; }

extensions/levelcode-ai/test/webviewCss.test.js

@@ -214,24 +214,35 @@ test('an approved MCP tool call folds its run-node into the approval chip (one r
 	assert.ok(/mcpMergePending = null;/.test(line), 'and closes a stale merge window on any other row');
 });
 
-test('SESSION CARD: six nowrap action buttons cannot overflow a narrow pane', () => {
-	// The card is two fixed-height lines and the action row is `flex-wrap: nowrap`, so buttons that
-	// do not fit do not wrap — they overflow. Five LABELLED buttons need roughly 300px; a sidebar is
-	// routinely narrower. The labels therefore have to disappear before that happens.
+test('SESSION CARD: the label-collapse threshold is above the width the labels actually need', () => {
+	// The card is two fixed-height lines and the action row is `flex-wrap: nowrap`, so buttons that do
+	// not fit do not wrap — they OVERFLOW the card.
 	//
-	// This is pinned because the failure is invisible in a wide window: whoever adds a sixth button
-	// will not see it break, and the person who does see it will be a user with a narrow sidebar.
-	const both = [
-		['chat.html', css],
-		['sessionsView.html', fs.readFileSync(path.join(__dirname, '..', 'media', 'sessionsView.html'), 'utf8')]
-	];
-	for (const [where, sheet] of both) {
+	// The numbers below were MEASURED in headless Chrome against the shipped button styling, with all
+	// six labels (Rename · Fork · Copy · Done · Delete · Pin) rendered:
+	//
+	//   chat.html          434px   padding 0 9px, 11.5px text, gap 6, 1px border
+	//   sessionsView.html  363px   padding 0 8px, 11px   text, gap 4, no border
+	//
+	// A threshold BELOW those leaves a band of widths where the labels are still painted and the row
+	// spills out of the card — which is exactly what shipped at 420/400 until this test existed. The
+	// assertion is therefore on the RELATIONSHIP, not on a magic number: raise a threshold freely,
+	// but never below what the labels need. Add a seventh button and this fails until you re-measure.
+	const NEEDS = { 'chat.html': 434, 'sessionsView.html': 363 };
+	const sheets = {
+		'chat.html': css,
+		'sessionsView.html': fs.readFileSync(path.join(__dirname, '..', 'media', 'sessionsView.html'), 'utf8')
+	};
+	for (const [where, sheet] of Object.entries(sheets)) {
 		assert.match(sheet, /\.sesscard\s*\{[^}]*container-type:\s*inline-size/,
-			where + ': the card must be a container for the query below to resolve against IT rather than the viewport');
-		assert.match(sheet, /@container\s*\(max-width:\s*[34][0-9]{2}px\)\s*\{\s*\.sesscard \.sesslbl\s*\{\s*display:\s*none/,
-			where + ': no width at which the labels collapse — a narrow pane will overflow');
+			where + ': the card must be a container, or the query resolves against the viewport instead');
+		const m = /@container\s*\(max-width:\s*(\d+)px\)\s*\{\s*\.sesscard \.sesslbl\s*\{\s*display:\s*none/.exec(sheet);
+		assert.ok(m, where + ': no width at which the labels collapse — a narrow pane will overflow');
+		assert.ok(Number(m[1]) >= NEEDS[where],
+			where + ': labels collapse at ' + m[1] + 'px but six labelled buttons need ' + NEEDS[where]
+			+ 'px — between those widths the labels paint and the nowrap row overflows the card');
 		assert.match(sheet, /\.sesscard \.sessacts \{[^}]*flex-wrap:\s*nowrap/,
-			where + ': the row stopped being nowrap, so this guard is now testing the wrong failure');
+			where + ': the row stopped being nowrap, so this guard now tests the wrong failure');
 	}
 });