From 590346e2d0ba3e157eb73832466defb2ec71113e Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Sat, 24 Oct 2026 20:23:44 +0900
Subject: fix(chat): keep composer action buttons a consistent width

---
 backend-handoff.md                   |  8 ++++++++
 src/features/chat/ui.test.ts         | 14 ++++++++++++++
 src/features/chat/ui/Composer.svelte |  6 +-----
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/backend-handoff.md b/backend-handoff.md
index d1d0756..8d30083 100644
--- a/backend-handoff.md
+++ b/backend-handoff.md
@@ -18,6 +18,14 @@
 > ?archived=`) was made in the same branch and the FE consumes it via the `file:` deps (dists
 > rebuilt). Recorded below.
 
+## Milestone: Consistent composer action width (`dev`, 2026-10-24)
+
+- Send, Queue, Stop, and Flush now share the same fixed `w-20` width; Flush no longer
+  widens the composer or changes text wrapping. Button actions and labels are unchanged.
+- Added regression coverage for the shared width across all four labels.
+- Verified: typecheck (0 errors/warnings), tests (2,591 passed; 2 skipped), Biome, and build.
+- Backend contracts, pins, and mirrors unchanged; no backend work required.
+
 ## Milestone: Close-tab cascade subagents (`feature/close-tab-cascade-subagents`, 2026-10-24)
 
 **Slice status: COMPLETE across the isolated frontend + backend feature branches.**
diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 74c0619..f98fdbb 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -849,6 +849,20 @@ describe("ChatView", () => {
 });
 
 describe("Composer", () => {
+  it.each([
+    { status: "idle", queuedMessageCount: 0, text: "", label: "Send" },
+    { status: "running", queuedMessageCount: 0, text: "next", label: "Queue" },
+    { status: "running", queuedMessageCount: 0, text: "", label: "Stop generation" },
+    { status: "running", queuedMessageCount: 1, text: "", label: "Flush" },
+  ] as const)("keeps $label at the same fixed width", async ({ label, text, ...props }) => {
+    const user = userEvent.setup();
+    render(Composer, { props: { ...props, onSend: vi.fn(), onQueue: vi.fn(), onStop: vi.fn() } });
+    if (text) await user.type(screen.getByRole("textbox", { name: "Message input" }), text);
+    const button = screen.getByRole("button", { name: label });
+    expect(button).toHaveClass("w-20", "shrink-0");
+    expect(button).not.toHaveClass("w-36");
+  });
+
   it.each([
     "running",
     "queued",
diff --git a/src/features/chat/ui/Composer.svelte b/src/features/chat/ui/Composer.svelte
index a43ed53..cd451bc 100644
--- a/src/features/chat/ui/Composer.svelte
+++ b/src/features/chat/ui/Composer.svelte
@@ -376,11 +376,7 @@
 
     {#if buttonMode === "stop"}
       <button
-        class="btn btn-error shrink-0"
-        class:w-20={stopButton.text === "Stop"}
-        class:w-36={stopButton.text !== "Stop"}
-        class:whitespace-normal={stopButton.text !== "Stop"}
-        class:leading-tight={stopButton.text !== "Stop"}
+        class="btn btn-error w-20 shrink-0"
         type="button"
         aria-label={stopButton.ariaLabel}
         title={stopButton.title}
-- 
cgit v1.2.3