Repository navigation
fix(app): wrap composer attachment cards to prevent clipping - #60186
Realmagnum wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
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?
Issue for this PR
Closes #60184
Type of change
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-nowrapinside a container styled withno-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:
flex-nowrap overflow-x-autowithflex-wrap max-h-40 overflow-y-autoondata-slot="composer-attachments-scroll". Cards wrap cleanly onto multiple rows and can scroll vertically if they exceed ~3 rows.attachments.cssthat were masking cards at the horizontal edges.How did you verify your code works?
QuoteCommentEditor) positions correctly on wrapped cards.Checklist