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>
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>
DEL btn (.btn-danger, "Forget sky?" data-confirm wired to the global #id_guard_portal) sits absolutely centered inside .sky-wheel-col; OK submits a POST to the new sky_delete view, which clears every sky_* field on the User model & redirects back to /dashboard/sky/.
The sky.html aperture is now uniform across saved/unsaved: form-col is always flex-column align-center justify-center so the fields + SAVE SKY pair sits visually centered. body.sky-saved adds *only* the snap-binary scroll layer (scroll-snap-type:y, modal-body display:contents, cols min-height:100% scroll-snap-align:start, wheel-col aspect-ratio cap released, form-col flex:0 0 auto so the snap basis wins) — the column-stacking is no longer gated.
Async save: SAVE SKY's success branch now calls _activateSavedState(), which adds body.sky-saved, draws the wheel from _lastChartData, pins overlay.scrollTop to the form section's offsetTop, then runs the existing _scrollApertureToTop ease-out so the wheel reveals from above instead of replacing the form with a hard cut. The wheel preview that previously redrew during typing is now gated on _savedSky — pre-first-save typing fetches the chart data (so SAVE SKY enables) but does not render the wheel, mirroring the My Sky applet's "no wheel until saved" UX. The in-room PICK SKY overlay (_sky_overlay.html) still previews live, deliberately untouched.
Pre-save the wheel-col is hidden via `body:not(.sky-saved) .sky-page .sky-wheel-col { display: none }`, so the empty SVG can't shunt the form below the fold (& the DEL btn rides the same selector since it lives inside .sky-wheel-col).
Tests: SkyDeleteTest IT class (5: clears fields, redirects, 405 on GET, login required, preserves unrelated user fields). MySkyDeleteFlowTest FT class (3: DEL btn visibility gated on sky data, NVM dismisses w. data intact, OK clears + reverts body class). MySkyAsyncSaveTest FT (1: fresh user → SAVE SKY → body picks up sky-saved, wheel SVG populates, DEL btn becomes visible — all without a page reload). All 13 sky FTs + sky ITs green; existing MySkyApertureSnapScrollTest & MySkyTimezoneRefreshTest still pass.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
Two carried-over rules from the @media (max-width:600px) block — written for the in-room PICK SKY modal where form-col is flex-row — collide with body.sky-saved's flex-column flip on .sky-page: (1) .sky-form-col > #id_sky_confirm{align-self:flex-end}, which means "bottom" under flex-row but "right" under flex-column, was pushing the btn to the right edge instead of centering it; (2) .sky-form-main{max-height:40vh; overflow-y:auto} clamped form-main into a tiny inner-scroll well. body.sky-saved now resets both — align-self:auto on the btn (inherits the col's align-items:center) & max-height:none + overflow-y:visible on form-main (the aperture handles scroll, not form-main).
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
.sky-page .sky-form-col defaults to flex-row align-end (form-main left, btn bottom-right). Under body.sky-saved that pinned the SAVE SKY btn to the corner under the snap layout — fix is flex-direction:column + align-items:center + justify-content:center, gap:1rem so the btn sits a clear rem below the form-main. .sky-page .sky-form-main capped at max-width:22rem so the input pills don't stretch the full landscape-mobile aperture width.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
post-save the .sky-page aperture flips into scroll-snap-y-mandatory mode: wheel-col & form-col each fill the aperture & carry scroll-snap-align:start, so vertical scroll toggles between them rather than free-flowing through both. Modal-body uses display:contents so the cols become direct flex children of .sky-page (where min-height:100% resolves against the explicit aperture height); wheel-col's aspect-ratio/max-height caps are released under body.sky-saved so the section actually fills the aperture instead of clipping at 480px. SAVE SKY's success branch calls _scrollApertureToTop(), a 280ms RAF loop w. ease-out cubic so the user lands back on the wheel after confirming from the form section. New FT class MySkyApertureSnapScrollTest covers (T1) snap-type:y mandatory + scroll-snap-align:start on both cols, (T2) scrollTop returns to 0 after SAVE SKY click; both red before the SCSS+JS, green after. Snap behavior is gated on body.sky-saved (set by sky_view based on user.sky_chart_data) so the pre-save form-only flow is untouched.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
.sky-field gap goes 0.25rem → 0 so label sits flush above its own input. Field-to-field spacing moves into a `& + & { margin-top: 0.4rem }` rule; small explanation text gets margin-top:0.2rem so it stays separated from the input it annotates. .sky-coords inner column gap zeroed for parity. .sky-place-wrap zeroes the geo button's inherited 4px top/bottom margin from .btn — without that, the wrap was 40px tall (vs 33px input) and align-items:center pushed the place input 4px below its label, leaving birth place as the lone field with a visible label-input gap.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
.sky-field input now mirrors .form-control's priUser fill / secUser border & text / pill border-radius / terUser focus glow — same look as the login email input. Readonly inputs (lat/lon) keep opacity:0.6. .input-group label (the "enter email for login" line above the email input) now adopts .sky-field label styling: 0.6rem uppercase, 0.1em letter-spacing, quaUser at 0.8 — so the login form's label/input pair reads as the same component as the sky-field rows.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
