Fix meals grid cells too wide on small screens - #54
Merged
Merged
Conversation
CSS Grid's 1fr tracks are minmax(auto, 1fr), so long nowrap dish names inflated every column past the 37rem pan-box floor. Use minmax(0, 1fr) and min-w-0 so cells stay within that floor and truncate instead of widening the row. Co-authored-by: Injoon Oh <injoon5@icloud.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Percentage width under HScroll's w-max wrapper is cyclic, so long nowrap dishes inflated the row past 37rem (~2 oversized columns on a phone). Mark the scroll port as an inline-size container and use max(100cqw, 37rem); keep min-w-0 on day cells so dishes truncate. Co-authored-by: Injoon Oh <injoon5@icloud.com>
This branch had an error being deployed
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
/mealsday cells blew past the intentional37remscroll floor — only ~2 oversized columns showed up.width: max(100%, 37rem)under HScroll’sw-maxwrapper. That%is cyclic, so layout fell back to dish-name intrinsic width (~1183px pan / ~237px cells at 390px viewport in a repro).max(100cqw, 37rem)against the port (~592px / ~118px cells, ~3.3 columns visible). Alsomin-w-0on cells so long dishes truncate inside the track.Test plan
/mealsat ~390px wide: ~3 day columns visible; pan box ≈ 37rem (not content-sized)