fix(chat): the context and review bars sat flush left, not in the column

Reported from the editor tab: the context-window card and the Keep all / Undo all bar
hug the left window edge while the transcript and composer are centred.

The shell-column rule centres seven bars:

  #bgTasksBar, #ctxBar, #planBar, #reviewBar, #workbar, #composer, #status {
    width: calc(100% - 2 * var(--shell-x));
    max-width: var(--prose-max);
    margin-inline: auto;          <- this
  }

Every selector in it is a BARE ID, so a later bare-id rule ties on specificity and wins
on order. Three of the seven then declare a `margin:` SHORTHAND hundreds of lines down —
`margin: 0 8px 6px` on #ctxBar and #bgTasksBar, `margin: 0 8px 8px` on #reviewBar — and a
shorthand writes every longhand it covers, so margin-inline: auto silently became 8px.
The bars kept the right WIDTH (the width calc is unopposed) and lost their position,
which is exactly what the report shows: correct size, wrong place.

Those insets were left over from the sidebar era and are redundant now — the width calc
already insets by --shell-x. Changed to margin-block, which cannot touch the inline axis.

#bgTasksBar had the same bug and was not in the report; it only shows while a background
command is running.

#composer also declares a shorthand, `margin: 8px auto` — its inline slot IS auto, so it
re-states the centring rather than breaking it. Left alone. Writing the guard I first
banned every `margin:` shorthand and it flagged the composer, which would have been a
false positive; the rule is "inline slot must be auto", not "no shorthand".

The guard walks the shell rule's OWN selector list rather than three hard-coded ids, so a
bar added to the column later is covered the day it is added. It parses the shorthand's
slots ([all] / [block inline] / [top inline bottom] / [top right bottom left]) and fails
only when the inline slot is not auto.

Bypass-verified, each by reverting the fix:
  - the reported bug verbatim (3-slot shorthand on #ctxBar)
  - the same on #reviewBar and #bgTasksBar
  - a 4-slot shorthand with asymmetric right/left
  - margin-left and margin-inline set directly
  - the shell column dropping margin-inline entirely
  - control: `margin: 6px auto` still passes, so the guard is not blanket

Verified by rendering the real bars at 1100px against develop and against the fix.

34 suites green.

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -58,6 +58,12 @@
     max-width: var(--prose-max);
     margin-inline: auto;
   }
+  /* Every element above is a bare id, so a LATER bare-id rule ties on specificity and wins. A
+     `margin:` shorthand in one of those rules silently resets margin-inline to whatever its
+     left/right slot says — which is how #ctxBar, #reviewBar and #bgTasksBar ended up flush against
+     the window edge while the composer centred. Their own inset is redundant anyway: the width
+     calc above already insets by --shell-x. Set margin-block in these rules, never margin.
+     test/webviewCss.test.js pins this for the whole list. */
 
   /* ---- conversation log ---- */
   /* The measure, the type and the inset are all declared on `body` (see above) so the composer and the
@@ -628,7 +634,7 @@
   /* Sits between the message log and the composer — sticky review summary for applied edits. */
   #reviewBar {
     display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
-    margin: 0 8px 8px; padding: 7px 11px; font-size: 12px;
+    margin-block: 0 8px; padding: 7px 11px; font-size: 12px;
     background: var(--vscode-editorWidget-background, #21252b);
     border: 1px solid var(--border); border-radius: 8px;
   }
@@ -665,7 +671,7 @@
 
   /* ---- agent plan checklist ---- */
   /* context-window usage meter (appears >50%, warns >80%, critical >92%) */
-  #ctxBar { flex: 0 0 auto; margin: 0 8px 6px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 11px; }
+  #ctxBar { flex: 0 0 auto; margin-block: 0 6px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 11px; }
   #ctxBar .ctxrow { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: 5px; }
   #ctxBar .ctxnum { font-variant-numeric: tabular-nums; }
   #ctxBar .ctxtrack { height: 5px; border-radius: 3px; background: rgba(127,127,127,.22); overflow: hidden; }
@@ -679,7 +685,7 @@
   #ctxBar .ctxnew:hover { background: var(--vscode-button-hoverBackground); }
   /* sticky active-plan bar (sits just above the review bar) — opaque so the log can't show behind it */
   /* Background tasks tray — collapsed by default; lists commands started with background:true */
-  #bgTasksBar { flex: 0 0 auto; margin: 0 8px 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
+  #bgTasksBar { flex: 0 0 auto; margin-block: 0 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
     background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 12px; }
   .bgt-head { display: flex; align-items: center; gap: 7px; padding: 8px 11px; cursor: pointer; user-select: none; color: var(--vscode-foreground); }
   .bgt-head:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.12)); }

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

@@ -729,4 +729,44 @@ test('SESSION CARD: every action button keeps a label for pointers and screen re
 	assert.match(pure, /aria-label="' \+ label \+ '"/, 'no accessible name on an icon-only button');
 });
 
+test('SHELL COLUMN: no member re-declares an inline margin, which would un-centre it', () => {
+	// The shell rule centres seven bars with `margin-inline: auto`, and every selector in it is a
+	// BARE ID. So a later bare-id rule ties on specificity and wins — and a `margin:` SHORTHAND in
+	// one of those rules silently resets margin-inline to its left/right slot. That is exactly how
+	// #ctxBar, #reviewBar and #bgTasksBar shipped flush against the window edge while the composer
+	// centred: `margin: 0 8px 6px` beat `margin-inline: auto` by sitting 600 lines further down.
+	//
+	// This walks the rule's OWN selector list rather than three hard-coded ids, so a bar added to
+	// the shell column later is covered the day it is added.
+	const shell = /\n\s*(#[\w#, -]*?#composer[\w#, -]*?)\s*\{([^}]*)\}/.exec(cssBlocks);
+	assert.ok(shell, 'the shell-column rule is gone');
+	assert.match(shell[2], /margin-inline:\s*auto/, 'the shell column no longer centres anything');
+
+	const ids = shell[1].split(',').map((x) => x.trim()).filter((x) => /^#[\w-]+$/.test(x));
+	assert.ok(ids.length >= 6, 'expected the whole bar list, got: ' + ids.join(' '));
+
+	for (const id of ids) {
+		const re = new RegExp('\\n\\s*' + id + '\\s*\\{([^}]*)\\}', 'g');
+		let hit;
+		while ((hit = re.exec(cssBlocks))) {
+			const body = hit[1];
+			// A shorthand is only a problem when its INLINE slot is not auto. `margin: 8px auto`
+			// re-states the centring and is fine; `margin: 0 8px 6px` destroys it. Slots are
+			// [all] / [block inline] / [top inline bottom] / [top right bottom left].
+			const sh = /(?:^|;)\s*margin\s*:\s*([^;}]+)/.exec(body);
+			if (sh) {
+				const p = sh[1].trim().split(/\s+/);
+				const inline = p.length === 1 ? [p[0]] : p.length === 4 ? [p[1], p[3]] : [p[1]];
+				assert.ok(inline.every((v) => v === 'auto'),
+					id + ' has `margin: ' + sh[1].trim() + '` — its inline slot is not auto, so it '
+					+ 'resets margin-inline and pins the bar to one edge. Use margin-block; the width '
+					+ 'calc already insets by --shell-x.');
+			}
+			const direct = /margin-(?:left|right|inline(?:-start|-end)?)\s*:\s*([^;}]+)/.exec(body);
+			assert.ok(!direct || direct[1].trim() === 'auto',
+				id + ' sets an inline margin directly, which beats the shell column\'s auto');
+		}
+	}
+});
+
 console.log('webviewCss: ' + n + ' tests passed');