[bugfix][#966] Compact Stop Button Width in Plan Webview

vscode/test/playwright/test-session-append.js

@@ -722,6 +722,27 @@ const run = async () => {
         throw new Error('Implementation stop button is not visible while implement is running');
       }
     });
+
+    // Hard regression guard: terminal stop must be narrower than action-row equal-width button.
+    const stopWidth = await page
+      .locator('.widget-terminal')
+      .filter({ has: page.locator('.terminal-title', { hasText: 'Implementation Log' }) })
+      .last()
+      .locator('.terminal-stop-button')
+      .evaluate((el) => el.getBoundingClientRect().width);
+    const actionWidth = await page
+      .locator('.widget-buttons')
+      .last()
+      .locator('button')
+      .first()
+      .evaluate((el) => el.getBoundingClientRect().width);
+    if (!(stopWidth < actionWidth)) {
+      throw new Error(
+        `Terminal stop button width (${stopWidth}px) should be less than action-row button width (${actionWidth}px). ` +
+          'The stop button may have inherited equal-width flex behavior.',
+      );
+    }
+
     await page.screenshot({ path: nextScreenshotPath(), fullPage: true });
 
     const implTerminalDone = {

vscode/test/playwright/test-session-append.md

@@ -34,6 +34,8 @@ The script is intentionally non-strict for UI semantics:
 - It records warnings in the report instead of hard-failing on every UI mismatch.
 - It still fails on hard runtime blockers (missing Playwright, server startup failure,
   page bootstrap failure).
+- One hard assertion validates stop control sizing: terminal stop buttons must be narrower
+  than action-row buttons to prevent the over-wide stop button regression.
 
 This design keeps the flow debuggable in CI while preserving human review of screenshots.
 

vscode/webview/plan/styles.css

@@ -273,6 +273,9 @@ button:disabled {
 
 .terminal-stop-button {
   margin-left: auto;
+  /* Intrinsic width: do not stretch like action-row buttons. */
+  flex: 0 0 auto;
+  min-width: auto;
 }
 
 .terminal-body {
@@ -321,7 +324,10 @@ button:disabled {
   color: var(--text);
   cursor: pointer;
   white-space: nowrap;
-  /* Equal-width buttons: flex distributes space evenly, min-width prevents truncation. */
+}
+
+/* Equal-width buttons in action rows: flex distributes space evenly, min-width prevents truncation. */
+.widget-buttons .widget-button {
   flex: 1 1 0;
   min-width: 70px;
 }

vscode/webview/plan/styles.md

@@ -13,9 +13,10 @@ Minimal readable styles for the Plan webview UI.
 - `.session-body`: contains the widget timeline for a session.
 - `.widget`: base class for appended widgets.
 - `.widget-terminal`: terminal widget container.
-- `.terminal-stop-button`: stop control aligned to the right edge of the terminal header.
+- `.terminal-stop-button`: stop control aligned to the right edge of the terminal header. Uses intrinsic width (`flex: 0 0 auto`) rather than equal-width sizing.
 - `.widget-progress`: step progress indicator widget.
-- `.widget-buttons`: action button groups.
+- `.widget-buttons`: action button groups. Contains `.widget-button` elements that are sized equally using flexbox (`flex: 1 1 0; min-width: 70px`).
+- `.widget-button`: shared visual button style used across contexts. Equal-width behavior only applies when inside `.widget-buttons`.
 - `.widget-input`: inline refinement input widget.
 - `.widget-status`: compact status badge widget.
 - `.logs`: monospace log display.