fix(chat): keep the composer remove badge anchored and align chip tokens - #6365
Conversation
The card wrapper had no width cap, so it sized to the filename's max-content width while the card itself capped at 220px. The remove badge is positioned against that wrapper, so a long filename stranded it far to the right of the card it belongs to. Moves the cap onto the wrapper and lets the card fill it.
The sent-message tile went icon-only, which made its fill the whole affordance — and against the workflow chat panel's --surface-1 that fill is ~8/255 away in light mode. Adds the border the user message bubble already pairs with --surface-5 for the same reason. - Restore an accessible name to the sent tiles: an icon-only div with a title attribute announces as nothing. - Step the composer icon badge on hover; the chip's hover fill closed to within 7/255 of it in light mode. - Extension label moves to --text-icon/text-caption; --text-muted was 2.4:1 on this fill in dark mode, well under AA. - Tooltip.Content no longer re-declares the width and truncation it owns — it was truncating the very name it exists to reveal.
…okens - Revert the sent-message attachments to main's styling: the icon-only tile dropped the filename, leaving no way to tell what was sent. - Radii onto the scale: --radius is 8px, so rounded-[10px] was off-system in both files. Outer surfaces use rounded-lg, the nested icon badge rounded-md. - Pill filename uses the named text-xs rather than an arbitrary text-[11px]. - The remove badge is opaque instead of a translucent scrim, so it reads the same over a light card and over a photo rather than compositing with each.
- Remove the chip tooltips: the document card already shows its filename, so the tooltip mostly restated it. - Collapse the single-use height constant and use size-[48px] on the media branch, which was h-[48px] + w-[48px] split across two class strings. - Remove badge moves to --surface-2; --surface-1 sat 8/255 from the chip fill in light mode, reachable on a coarse pointer where the chip's hover-hover fill never applies. Its hover gating now matches the chip's. - py-[7px] so the 32px icon badge fits the 48px box instead of overflowing it. - Trim comments to TSDoc or one-line rationale per the repo rule.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
|
@cursor review |
PR SummaryLow Risk Overview Composer chips drop filename tooltips, show the remove badge always (no hover opacity), and use design-token radii ( Tests add structural checks for wrapper Reviewed by Cursor Bugbot for commit eef32b1. Configure here. |
Greptile SummaryThe PR corrects attachment-chip sizing and presentation while restoring filenames on sent-message attachments.
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains.
|
| Filename | Overview |
|---|---|
| apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx | Restores filename pills for document attachments and standardizes media sizing, radii, and typography. |
| apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.test.tsx | Adds structural regression coverage for wrapper width capping and an always-visible remove control. |
| apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx | Reworks attachment-chip sizing and styling so the remove badge stays anchored, visible, and independently operable. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts | Refines explanatory comments without changing file-attachment behavior. |
Reviews (5): Last reviewed commit: "fix(chat): stop gating the remove badge ..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Gating the reveal on hover-hover alone would hide it from touch entirely, since that variant is fine-pointer only. Instead it is visible by default and only fine pointers get reveal-on-hover, so the badge never depends on an emulated hover.
|
@cursor review |
|
@cursor review |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
On a fine pointer the badge is transparent until hover, so tabbing to it left a sighted keyboard user unable to see which attachment Enter would remove. The focus-visible chain carries higher specificity than the hide rule, so it wins regardless of source order.
|
@cursor review |
The chip's hover is the only hover affordance needed. The badge fill is now constant, sitting one step below --surface-6 in light mode so the chip's hover fill cannot close on it — which is what the per-badge step was compensating for.
|
@cursor review |
…ess it hover-hover expands to '@media (hover:hover) and (pointer:fine) { &:hover }', so it binds to the element carrying the class. On the badge that meant every rule required hovering the badge itself, making the whole chain dead CSS — the badge was simply always visible. Rather than rebuild the gating, drop it: an always-visible control is reachable on touch and stays visible while holding keyboard focus, which the reveal-on-hover form could not manage without special cases for both.
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
1 issue from previous review remains unresolved.
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 0a4ac3c. Configure here.
|
@cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit eef32b1. Configure here.
1 participant
Summary
main— an earlier icon-only pass dropped the filename, leaving no way to tell what was sent.--radiusis 8px):rounded-[10px]was off-system in both files. Outer surfaces userounded-lg, the nested icon badgerounded-md. Filename uses the namedtext-xsinstead of an arbitrarytext-[11px].--surface-2) instead of a translucent scrim, so it reads identically over a light card and over a photo rather than compositing with each.--surface-1was 8/255 from the chip fill in light mode.hover-hover:; the two were mixed, so a coarse-pointer tap revealed the badge without the chip's hover fill.py-[7px]so the 32px icon badge fits the 48px box rather than overflowing its padding.Type of Change
Testing
tsc --noEmit,lint,check:api-validation,check:import-specifiersclean. 457 tests pass in the touched area, including 5 on the chip. Verified locally against a running dev server.Checklist