root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(chat): widen the too-narrow quick chat stop button

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-14 00:18:45 -07:00
parent 8cf32d5b2b
commit 9eeaaa706f
2 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fix-quick-chat-stop-button-width.md Normal file
View File

@@ -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.

14
packages/dashboard/app/components/QuickChatFAB.css
View File

@@ -784,6 +784,20 @@
cursor: not-allowed; 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 { .quick-chat-attachment-previews {
display: flex; display: flex;
gap: var(--space-xs); gap: var(--space-xs);