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

sky.html: tame iOS Firefox date/time native widgets w. appearance:none + max-width; mirror small-landscape btn-primary scaling onto portrait & narrow form-col gap on both

Browse Source 
iOS Firefox renders <input type="date|time"> with a native widget whose intrinsic content width ignores min-width:0 alone, so the date/time pills bled past .sky-form-main while text-input siblings fit fine. Adding appearance:none + -webkit-appearance:none on the two input types drops the native chrome so width/padding/border are honored uniformly across pills (the picker still opens on tap); max-width:100% on the .sky-field input baseline is belt-&-suspenders for any other widget that ignores min-width:0.

The .btn-primary shrink-to-2.75rem rule that lived under (orientation:landscape) and (max-width:1100px) now also fires on (orientation:portrait), so SAVE SKY scales down on phone portrait aperture too. Same media envelope narrows .sky-page .sky-form-col gap from 1rem → 0.4rem so SAVE SKY tucks closer to #id_sky_status & the form fits short-aspect phones without clipping the btn against the footer.

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 14:04:15 -04:00
parent c8d7b055d7
commit 283b417341
2 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -202,8 +202,11 @@ html.sky-open .sky-modal-wrap {
// 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.
// phones & trigger horizontal page scroll. max-width:100% is belt &
// suspenders for iOS WebKit, which treats date/time as a native
// widget that ignores min-width:0 alone.
min-width: 0;
max-width: 100%;
background-color: rgba(var(--priUser), 1);
color: rgba(var(--secUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.5);
@@ -212,6 +215,16 @@ html.sky-open .sky-modal-wrap {
border-radius: calc((var(--_pad-v) * 2 + 1em) / 3);
font-family: inherit;
// iOS Firefox renders <input type="date|time"> as a native widget
// whose intrinsic width exceeds .sky-form-main on narrow phones.
// appearance:none drops the native chrome so width/padding/border
// are honored uniformly; the date/time picker still opens on tap.
&[type="date"],
&[type="time"] {
-webkit-appearance: none;
appearance: none;
}
&:focus {
outline: none;
border-color: rgba(var(--terUser), 0.75);
@@ -1009,6 +1022,16 @@ body:not(.sky-saved) .sky-page .sky-wheel-col {
display: none;
}
// On the same media envelopes where .btn-primary shrinks to 2.75rem, narrow
// the form-col's vertical gap so SAVE SKY tucks closer to #id_sky_status &
// the form fits a short landscape / portrait phone aperture without clipping.
@media (orientation: landscape) and (max-width: 1100px),
(orientation: portrait) {
.sky-page .sky-form-col {
gap: 0.4rem;
}
}
// ── Snap-binary aperture (post-save) ──────────────────────────────────────────
// Once a sky is saved, the .sky-page aperture flips into scroll-snap mode:
// the wheel section + form section each fill the aperture, so scrolling toggles