Fix shared row pill overflow on single-person lists - #341
Merged
Conversation
The chip block is sized to hold a fixed number of 32px discs — one person's worth is 44px — and a shared row was pinned to the same width. Its pill is a checkbox and the word "Shared", about 109px, so on every one-person list at phone width the pill ran out past the right edge of the category card and was clipped. A shared row now takes that width as a minimum rather than a rule: with several people it still starts at the first chip column, exactly as before, and with one it takes the room the pill needs and gives the rest back to the name.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes a layout bug where shared row pills (controls) would overflow off the side of the card on single-person lists. The chip block width (44px for one person) was too narrow to contain the pill, which is several times wider than a single person's disc.
Changes
widthtominWidthstyling, allowing their pills to expand beyond the chip block width when needed while still aligning with person chips when space permitssoloPeople,soloItems,soloColumns,soloRows) and helper (renderSoloGrid) to test single-person list layouts, plus two new test cases:minWidthinstead ofwidthon single-person listsImplementation Details
The fix distinguishes between two row types:
widthto maintain consistent column alignment throughout the cardminWidthto allow the pill to take the space it needs while respecting the minimum width when there's roomThis ensures shared items don't overflow on narrow lists while maintaining the layout integrity for person-specific items.
https://claude.ai/code/session_01DjmC4oY6u11uF7yL6oJzQD