fix(chat): keep the composer remove badge anchored and align chip tokens by waleedlatif1 · Pull Request #6365 · simstudioai/sim

waleedlatif1 · 2026-08-07T02:50:22Z

Summary

The remove badge drifted far to the right of a file card. The wrapper it is positioned against had no width cap, so it sized to the filename's max-content width while the card capped itself at 220px. Moved the cap onto the wrapper.
Restored the sent-message attachment styling from main — an earlier icon-only pass dropped the filename, leaving no way to tell what was sent.
Removed the chip tooltips; the card already shows the filename.
Radii onto the token scale (--radius is 8px): rounded-[10px] was off-system in both files. Outer surfaces use rounded-lg, the nested icon badge rounded-md. Filename uses the named text-xs instead of an arbitrary text-[11px].
Remove badge is opaque (--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-1 was 8/255 from the chip fill in light mode.
Its hover gating now matches the chip's 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

Bug fix

Testing

tsc --noEmit, lint, check:api-validation, check:import-specifiers clean. 457 tests pass in the touched area, including 5 on the chip. Verified locally against a running dev server.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

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.

vercel · 2026-08-07T02:50:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Aug 7, 2026 3:13am

waleedlatif1 · 2026-08-07T02:50:28Z

@greptile

waleedlatif1 · 2026-08-07T02:50:29Z

@cursor review

cursor · 2026-08-07T02:50:33Z

PR Summary

Low Risk
UI-only styling and layout fixes in chat attachment components, with added tests and no auth or data-path changes.

Overview
Fixes composer attachment chips so the remove control stays aligned with the card: the max-width cap sits on the wrapper that positions the badge, not only on the inner button, so long filenames no longer push the badge off to the right.

Composer chips drop filename tooltips, show the remove badge always (no hover opacity), and use design-token radii (rounded-lg / rounded-md) and typography tokens. Document icon badge fill and remove-badge surface colors are adjusted so hover and overlays read consistently on cards and thumbnails. Sent-message attachment pills get the same radius and text token cleanup.

Tests add structural checks for wrapper max-w and non-opacity-gated remove controls. use-file-attachments only tightens comments around preview URL handling.

^{Reviewed by Cursor Bugbot for commit eef32b1. Configure here.}

greptile-apps · 2026-08-07T02:52:50Z

Greptile Summary

The PR corrects attachment-chip sizing and presentation while restoring filenames on sent-message attachments.

Moves the document-chip width cap to the wrapper that anchors the remove badge.
Keeps the remove control permanently visible for touch and keyboard access.
Aligns attachment radii, typography, spacing, and surface tokens with the design system.
Adds regression coverage for long filenames and remove-control visibility.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

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}

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.

waleedlatif1 · 2026-08-07T02:55:48Z

@greptile

waleedlatif1 · 2026-08-07T02:55:49Z

@cursor review

waleedlatif1 · 2026-08-07T02:57:59Z

@greptile

waleedlatif1 · 2026-08-07T02:58:00Z

@cursor review

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.

waleedlatif1 · 2026-08-07T03:03:20Z

@greptile

waleedlatif1 · 2026-08-07T03:03:21Z

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

waleedlatif1 · 2026-08-07T03:07:06Z

@greptile

waleedlatif1 · 2026-08-07T03:07:08Z

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

cursor

✅ 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.}

waleedlatif1 · 2026-08-07T03:14:14Z

@greptile

waleedlatif1 · 2026-08-07T03:14:15Z

@cursor review

cursor

✅ 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.}

waleedlatif1 added 4 commits August 6, 2026 19:18

vercelBottemporarily deployed to Preview August 7, 2026 02:50 Inactive

greptile-appsBot reviewed Aug 7, 2026
View reviewed changes

Comment thread...rkspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx Outdated

vercelBottemporarily deployed to Preview August 7, 2026 02:55 Inactive

cursorBot reviewed Aug 7, 2026
View reviewed changes

Comment thread...rkspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
Comment thread...rkspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx Outdated

greptile-appsBot reviewed Aug 7, 2026
View reviewed changes

Comment thread...rkspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx Outdated

cursorBot reviewed Aug 7, 2026
View reviewed changes

Comment thread...rkspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx Outdated

vercelBottemporarily deployed to Preview August 7, 2026 03:03 Inactive

vercelBottemporarily deployed to Preview August 7, 2026 03:07 Inactive

vercelBottemporarily deployed to Preview August 7, 2026 03:13 Inactive

cursorBot reviewed Aug 7, 2026
View reviewed changes

waleedlatif1 merged commit 6599b4c into stagingAug 7, 2026
24 checks passed

waleedlatif1 deleted the fix/composer-chip-remove-badge branch August 7, 2026 03:16

cursorBot reviewed Aug 7, 2026
View reviewed changes

waleedlatif1 mentioned this pull request Aug 7, 2026
v0.7.62: file handling, mothership async runs, heic support, file hardening, general ui improvements #6366
Merged

Uh oh!

Conversation

waleedlatif1 commented Aug 7, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercelBot commented Aug 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

cursorBot commented Aug 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

greptile-appsBot commented Aug 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

cursorBot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

waleedlatif1 commented Aug 7, 2026

Uh oh!

Uh oh!

cursorBot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercelBot commented Aug 7, 2026•
edited
Loading

cursorBot commented Aug 7, 2026•
edited
Loading

greptile-appsBot commented Aug 7, 2026•
edited
Loading