Fix grid layout overflow on small screens and long uploader names - #13
Merged
Merged
Conversation
On a 360px-wide phone the gallery falls to the two-column rule, which asked for `1fr 1fr`. A bare `1fr` track has an automatic minimum of the item's own content width, and a tile's caption holds the uploader name with `white-space: nowrap` — so a long name sized the column instead of being ellipsised, and the grid, the photos and the page with them ran off the side of the screen. A 393px iPhone never hit this: above 380px the grid uses `auto-fill, minmax(140px, 1fr)`, whose minimum is a fixed 140px. Ask for `minmax(0, 1fr)` so the tracks may shrink to the space available, and give the tile `min-width: 0` so a caption can never set the column's floor again wherever the grid is used. Either alone fixes it; together the tile carries its own guarantee. Checked in headless Chromium at 360/384/393/412px against a replica of the gallery: 782px of document on a 360px screen before, 360px after, with the long name now clipped to an ellipsis.
Removed unnecessary comments in the CSS file to improve readability.
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
Fixed CSS grid layout issues that caused the gallery to overflow the viewport width on small screens and when tile captions contain long uploader names.
Key Changes
min-width: 0to.tileclass to allow grid items to shrink below their content's minimum width, enabling proper text ellipsis on long uploader namesrepeat(2, minmax(0, 1fr))instead of1fr 1fr, preventing the grid from expanding beyond the screen widthImplementation Details
The changes address a CSS Grid quirk where grid items have an automatic minimum size equal to their content's minimum width. This caused:
By explicitly setting
min-width: 0on tiles and usingminmax(0, 1fr)in the grid template, grid items can now shrink below their content size, allowing proper text truncation and preventing layout overflow.https://claude.ai/code/session_011L4hw8a5wdb8Z3EYzY2jcn