fix(mobile): keep landscape timeline row labels on a single line#241
Merged
fix(mobile): keep landscape timeline row labels on a single line#241
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
After widening the timeline to fill the rotated viewport in #240, the sticky-left row label column stayed at 5rem — too narrow for "ACTIVITIES" / "TRANSPORT" + icon, so the browser broke the labels into vertical letter-stacks (one character per line). Two fixes: - Bump the landscape label column from 5rem to 7rem so the longest label ("ACTIVITIES", 10 chars uppercase + tracking-wider) fits beside its 4×4 icon without wrapping. - Add `whitespace-nowrap` to the label span and `shrink-0` to the icon as a guard so even if a future label runs longer the column boundary clips the overflow rather than re-introducing the letter-stack. https://claude.ai/code/session_01H5kv9m5n8eYqwnyGZzvgTW
justmarks
force-pushed
the
claude/fix-pwa-rotation-55bRb
branch
from
43821b0 to
aa67865
Compare
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
After #240 widened the timeline to fill the rotated viewport, the sticky-left row label column stayed at
5rem— too narrow forACTIVITIES/TRANSPORT+ their icon, so the browser broke the labels into vertical letter-stacks (one character per line). Two fixes:5rem→7remso the longest label (ACTIVITIES, 10 chars uppercase + tracking-wider) fits beside its 4×4 icon without wrapping.whitespace-nowrapto the label span andshrink-0to the icon as a guard, so a future longer label gets clipped by the column boundary rather than re-introducing the vertical letter-stack.Test plan
TRANSPORT,LODGING,ACTIVITIES,DINING) render on single lines next to their icons.7remper day column.3rem, icon-only.https://claude.ai/code/session_01H5kv9m5n8eYqwnyGZzvgTW
Generated by Claude Code