Skip to content

fix(mobile): stop the native date input from overflowing the issue page#49

Merged
bryankennedy merged 1 commit into
mainfrom
fix/issue-date-overflow-mobile
Jun 30, 2026
Merged

fix(mobile): stop the native date input from overflowing the issue page#49
bryankennedy merged 1 commit into
mainfrom
fix/issue-date-overflow-mobile

Conversation

@exe-dev-github-integration

Copy link
Copy Markdown
Contributor

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 to min-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 every w-full field 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

  • Issue page: min-w-0 on the field <aside> (lets the grid track constrain it) and on the date input (pins the native control to the column width via its existing w-full).
  • Global phone hardening (styles.css, ≤639px): every input/select/textarea gets min-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 a flex row with the identical risk.

Verification

  • tsc -b clean; bun run test → 84 pass.
  • Mobile viewport (390, with a due date set): issue page and new-issue dialog both report 0px horizontal page overflow; the date input is constrained to its column (361px) rather than dictating width. Desktop (1440) layout unchanged (fields stay the 14rem right column, no overflow).
  • ⚠️ The iOS-specific intrinsic date width isn't reproducible in headless Chromium, so the structural min-width:0 fix wants an on-device confirm — but the mechanism (grid item min-width:auto → native-control overflow) is well understood and the standard fix.

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.
@bryankennedy bryankennedy merged commit 0324e74 into main Jun 30, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant