Skip to content

fix(app): wrap composer attachment cards to prevent clipping - #60186

Open
Realmagnum wants to merge 1 commit into
anomalyco:devfrom
Realmagnum:fix/composer-attachments-wrap
Open

Realmagnum wants to merge 1 commit into
anomalyco:devfrom
Realmagnum:fix/composer-attachments-wrap

Conversation

@Realmagnum

Copy link
Copy Markdown

Issue for this PR

Closes #60184

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

When adding multiple quotes or comment attachments to the composer (e.g. 5+ cards of 160px width), the cards are arranged in a single row with flex-nowrap inside a container styled with no-scrollbar. Once the cards exceed the composer width, they overflow past the right boundary and get clipped off, becoming invisible and unreachable.

This PR fixes the issue by:

  • Replacing flex-nowrap overflow-x-auto with flex-wrap max-h-40 overflow-y-auto on data-slot="composer-attachments-scroll". Cards wrap cleanly onto multiple rows and can scroll vertically if they exceed ~3 rows.
  • Removing the horizontal fade mask overlays and scroll-timeline animations in attachments.css that were masking cards at the horizontal edges.

How did you verify your code works?

  • Verified with 5+ quote chips: cards wrap to row 2 and stay visible, clickable, and editable.
  • Verified comment editor popover (QuoteCommentEditor) positions correctly on wrapped cards.
  • Verified removing individual cards re-flows the remaining cards cleanly.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change looks sound, but I couldn't check it visually. It's in the web/desktop composer and I had no browser here, so I reviewed the code, ran a type check on packages/app (passes) and ran the composer unit tests (all pass). The removed fade slots and scroll-timeline CSS aren't referenced anywhere else. QuoteCommentEditor positions itself from the card's on-screen position and re-measures on scroll, so it should follow cards on wrapped or scrolled rows.

Public API: unchanged.

For maintainers: this replaces the deliberate design (one horizontally scrolling row with edge fades) with wrapping rows. As the reply on #60184 notes, cards past the edge can currently be reached with a trackpad swipe or Shift+scroll, so this is a layout change to accept rather than a pure bug fix. With many attachments the composer can also grow up to about 160px taller.

@Realmagnum, could you add before/after screenshots (or a short video) with 5+ quote cards, ideally with one card's comment editor open on the second row?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

desktop: composer quote and attachment cards overflow and get clipped with 5+ items

1 participant