The Quick Actions in the AI Trading Copilot floating modal were broken:
- Always 2 columns regardless of viewport (cards overflowed at narrow widths).
- Used <Button> from primitives which is inline-flex internally; the two
inline-block <span> children for title and prompt overlapped.
- Prompt was truncated client-side with .slice(0, 55)+'...' instead of
proper CSS line-clamp, causing inconsistent display.
- No min-width: 0 on grid/card/text so content could push the card past
the modal width (460px).
Refactored:
- Replaced <Button> with native <button> (cleaner default styling base).
- New CSS classes copilot-quick-action-card, -title, -prompt with explicit
flex-direction: column so title and description stack reliably.
- Responsive grid: single column below 480px, 2 columns above. The modal
is 460px wide on desktop and shrinks to viewport-32 on smaller screens,
so this prevents card overflow on narrow phones.
- Title: single-line truncate with ellipsis, full text exposed via title
attribute on the button (tooltip + a11y).
- Prompt: -webkit-line-clamp: 2 (no JS slice). Wraps cleanly on long
prompts. word-break + overflow-wrap as guards.
- Card: min-height 64px so they align in a row without text-length
jumping. Hover, active, and focus-visible states for keyboard a11y.
- Body container gets bottom padding so the last card is reachable above
the composer input.
Container changes:
- .copilot-body class added to messages scroll container; bottom padding
ensures composer doesn't crowd content.
- The modal shell (existing) already uses display:flex; flex-direction:
column; overflow:hidden so header stays top, body scrolls, composer
stays bottom — preserved unchanged.
No breaking changes to chat behavior, sendMessage flow, or quick action
prompts.
Generated with [Devin](https://cli.devin.ai/docs)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
343ffb48af