From f2dd46832961558dfb66c63159f48d166e1bdb61 Mon Sep 17 00:00:00 2001
From: Jian Weng <jian.weng465@gmail.com>
Date: Wed, 18 Feb 2026 20:23:26 +0300
Subject: [PATCH] [bugfix][#966] Compact Stop Button Width in Plan Webview

vscode/webview/plan/styles.css
- Remove global equal-width flex rules from .widget-button
- Add scoped rule .widget-buttons .widget-button for action-row equal-width sizing
- Add intrinsic width rules (flex: 0 0 auto; min-width: auto) to .terminal-stop-button

vscode/webview/plan/styles.md
- Document that .widget-button provides shared visual style only
- Document that equal-width behavior applies only in .widget-buttons context
- Document that .terminal-stop-button uses intrinsic width with right alignment

vscode/test/playwright/test-session-append.js
- Add hard regression assertion comparing terminal stop button width vs action-row button width
- Throws error if stop button is not narrower than action buttons

vscode/test/playwright/test-session-append.md
- Document the hard assertion for stop-width regression check

Issue 966 resolved
---
 vscode/test/playwright/test-session-append.js | 21 +++++++++++++++++++
 vscode/test/playwright/test-session-append.md |  2 ++
 vscode/webview/plan/styles.css                |  8 ++++++-
 vscode/webview/plan/styles.md                 |  5 +++--
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/vscode/test/playwright/test-session-append.js b/vscode/test/playwright/test-session-append.js
index d853e406..708878bf 100755
--- a/vscode/test/playwright/test-session-append.js
+++ b/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 = {
diff --git a/vscode/test/playwright/test-session-append.md b/vscode/test/playwright/test-session-append.md
index e1be0a2a..4b5b7987 100644
--- a/vscode/test/playwright/test-session-append.md
+++ b/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.
 
diff --git a/vscode/webview/plan/styles.css b/vscode/webview/plan/styles.css
index 520ba651..9cf3437f 100644
--- a/vscode/webview/plan/styles.css
+++ b/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;
 }
diff --git a/vscode/webview/plan/styles.md b/vscode/webview/plan/styles.md
index 5df17c84..f8ec47c8 100644
--- a/vscode/webview/plan/styles.md
+++ b/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.