discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sky.html: clip horizontal overflow on iOS Firefox — .sky-page overflow-x:hidden + min-width:0 on .sky-field input

Browse Source 
iOS Firefox renders <input type="date"> & <input type="time"> with a native widget whose minimum content width can exceed .sky-form-main on narrow phones, spilling past the form column & triggering page-level horizontal scroll. Two defensive layers: (1) min-width:0 on .sky-field input lets the native widget shrink below its intrinsic content width; (2) overflow-x:hidden on .sky-page clips anything that still slips past — the aperture is the snap scroll container so this only affects the column-stack direction we don't want anyway. body.page-sky already has overflow:hidden but iOS Firefox doesn't always honor it for native form controls.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-08 13:18:30 -04:00
parent 9ff437012a
commit c8d7b055d7
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/static_src/scss/_sky.scss
View File

@@ -199,6 +199,11 @@ html.sky-open .sky-modal-wrap {
// priUser fill, secUser gold border + text, pill rounding, terUser focus glow.
input {
width: 100%;
// min-width:0 lets the input shrink below its native content-width on
// iOS Firefox, which gives <input type="date|time"> widgets a fixed
// minimum that would otherwise spill past .sky-form-main on narrow
// phones & trigger horizontal page scroll.
min-width: 0;
background-color: rgba(var(--priUser), 1);
color: rgba(var(--secUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.5);
@@ -921,7 +926,11 @@ body.page-sky {
}
}
// Sky page fills the aperture; its content can scroll past the bottom edge
// Sky page fills the aperture; its content can scroll past the bottom edge.
// overflow-x: hidden clips any horizontal overflow that would otherwise create
// page-level horizontal scroll on iOS Firefox — html/body overflow:hidden on
// page-sky doesn't always catch native <input type="date|time"> widgets whose
// minimum content width exceeds the form column on narrow phones.
.sky-page {
position: relative;
flex: 1;
@@ -929,6 +938,7 @@ body.page-sky {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
// DEL btn pinned at the wheel center — only rendered when chart_data exists.