From 9eeaaa706f4cbdbb63e8bb59c4555fa18493c212 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 14 Jun 2026 00:18:45 -0700 Subject: [PATCH] fix(chat): widen the too-narrow quick chat stop button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The quick chat stop button reused ChatView's `.chat-input-stop` class, which sizes itself with `--chat-input-control-size` — a variable defined on `.chat-input-row` in the ChatView composer and undefined in the quick chat DOM. The invalid var collapsed the button's width (and mobile min-width) toward its icon, leaving it noticeably narrower than the send button it replaces. Pin the stop button to the send button's square dimensions with a compound selector using globally-scoped spacing tokens, so it outranks the single-class base and mobile rules from both stylesheets. Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/fix-quick-chat-stop-button-width.md | 5 +++++ packages/dashboard/app/components/QuickChatFAB.css | 14 ++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 .changeset/fix-quick-chat-stop-button-width.md diff --git a/.changeset/fix-quick-chat-stop-button-width.md b/.changeset/fix-quick-chat-stop-button-width.md new file mode 100644 index 0000000000..60616f4b98 --- /dev/null +++ b/.changeset/fix-quick-chat-stop-button-width.md @@ -0,0 +1,5 @@ +--- +"@fusion/dashboard": patch +--- + +Fix the quick chat stop button rendering too narrow. It borrowed ChatView's `.chat-input-stop` styling, which sizes itself with `--chat-input-control-size` — a variable scoped to ChatView's composer and undefined in the quick chat DOM — collapsing the button toward its icon width. It is now pinned to the send button's square dimensions. diff --git a/packages/dashboard/app/components/QuickChatFAB.css b/packages/dashboard/app/components/QuickChatFAB.css index b8d4ea6cd7..9388fccbf4 100644 --- a/packages/dashboard/app/components/QuickChatFAB.css +++ b/packages/dashboard/app/components/QuickChatFAB.css @@ -784,6 +784,20 @@ cursor: not-allowed; } +/* The quick chat stop button reuses .chat-input-stop for its red appearance, + but that class sizes itself with --chat-input-control-size, a variable scoped + to ChatView's .chat-input-row and undefined in this DOM — which collapsed the + button toward its icon width. Pin it to the send button's square dimensions + using globally-scoped spacing tokens. The compound selector outranks the + single-class base and mobile rules from both stylesheets. */ +.quick-chat-send-btn.chat-input-stop { + width: calc(var(--space-lg) + var(--space-xl)); + min-width: calc(var(--space-lg) + var(--space-xl)); + height: calc(var(--space-lg) + var(--space-xl)); + min-height: calc(var(--space-lg) + var(--space-xl)); + border-radius: var(--radius-sm); +} + .quick-chat-attachment-previews { display: flex; gap: var(--space-xs);