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);