From 283b417341cdd6afff5194079b24cc61f3731a81 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Fri, 8 May 2026 14:04:15 -0400 Subject: [PATCH] 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 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit iOS Firefox renders 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 Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/static_src/scss/_button-pad.scss | 3 ++- src/static_src/scss/_sky.scss | 25 ++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/static_src/scss/_button-pad.scss b/src/static_src/scss/_button-pad.scss index 7eeb23a..5acc3be 100644 --- a/src/static_src/scss/_button-pad.scss +++ b/src/static_src/scss/_button-pad.scss @@ -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; diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index b66ad26..2b517d9 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -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 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 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