fix(mobile): stop the native date input from overflowing the issue page#49
Merged
Merged
Conversation
On the issue view on iOS, the page scrolled horizontally and every field ran off the right edge. Cause: the field strip is an <aside> grid item, and grid items default to min-width:auto — they won't shrink below their content's intrinsic width. A native filled `<input type="date">` has a wide intrinsic width on iOS, so it stretched the aside (and every w-full field in it) past the viewport. (Chromium renders date inputs compactly, which is why the audit and CI missed it.) - Issue page: add min-w-0 to the field <aside> (so the grid track constrains it) and to the date input itself, pinning the native control to the column width. - Harden globally on phones (styles.css, <=639px): give every form control min-width:0 + max-width:100%, so no native control (e.g. the new-issue dialog's date field, which sits in a flex row with the same risk) can push past its container. Verified in a mobile viewport: issue page and new-issue dialog both report zero horizontal page overflow with a due date set; desktop layout unchanged. The iOS-specific intrinsic width isn't reproducible in headless Chromium, so the structural min-width:0 fix needs an on-device confirm.
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
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.
Problem
On the issue view on a phone, the page scrolls sideways and every field (Status, Priority, Estimate, Due date) plus the title and header run off the right edge — reported with a screenshot showing all the field boxes shifted past the screen.
Cause
The issue page's field strip is an
<aside>grid item (from the #45 layout). Grid items default tomin-width: auto, so they won't shrink below their content's intrinsic width. A native filled<input type="date">has a wide intrinsic width on iOS, so it became the aside's minimum and stretched the aside — and everyw-fullfield inside it — past the viewport, forcing document-level horizontal scroll.The earlier mobile audit + CI missed it because (a) the test issue had no due date and (b) Chromium renders date inputs compactly (~110px) where iOS renders them much wider.
Fix
min-w-0on the field<aside>(lets the grid track constrain it) and on the date input (pins the native control to the column width via its existingw-full).styles.css,≤639px): everyinput/select/textareagetsmin-width: 0; max-width: 100%, so no native control can push past its container — this also covers the new-issue dialog's date field, which sits in aflexrow with the identical risk.Verification
tsc -bclean;bun run test→ 84 pass.min-width:0fix wants an on-device confirm — but the mechanism (grid itemmin-width:auto→ native-control overflow) is well understood and the standard fix.