From 590346e2d0ba3e157eb73832466defb2ec71113e Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Sat, 24 Oct 2026 20:23:44 +0900 Subject: fix(chat): keep composer action buttons a consistent width --- src/features/chat/ui.test.ts | 14 ++++++++++++++ src/features/chat/ui/Composer.svelte | 6 +----- 2 files changed, 15 insertions(+), 5 deletions(-) (limited to 'src/features') 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"}