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

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

View File

@@ -63,7 +63,8 @@
;
}
@media (orientation: landscape) and (max-width: 1100px) {
@media (orientation: landscape) and (max-width: 1100px),
(orientation: portrait) {
width: 2.75rem !important;
height: 2.75rem !important;
font-size: 0.625rem !important;