mobile h2 + sky wheel landscape fit: per-letter flex spread (justify-content: space-between via base.html JS letter-splitter) replaces text-justify: inter-character — iOS Safari + Firefox silently fall back to inter-word for Latin text, leaving letters clustered at the slot start; flex layout works everywhere; viewport-fluid font clamp(1.3rem, 5vw, 2rem) portrait + clamp(1.2rem, 4.4vh, 2.75rem) landscape so glyphs scale w. viewport instead of a fixed-rem ceiling that overflowed the 45/55 slot at the rem-clamp floor; portrait <500px gets padding-inline 0.4em→0.6em on the word-spans so H-B don't run together at the cramped font-size; .sky-page post-save scroll-snap sections pinned to height: 100% (was: min-height: 100%) + .sky-svg max-height: 100% so the wheel fits exactly one aperture on landscape mobile (was: 480px max blew past ~350px aperture, leaving an intermediate scroll position)

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_sky.scss

@@ -1089,18 +1089,32 @@ body.sky-saved {
     .sky-page .sky-form-col {
         scroll-snap-align: start;
         scroll-snap-stop: always;
-        min-height: 100%;
+        // height (not min-height) pins each section to EXACTLY one aperture so
+        // the snap-stops land at integer multiples of the viewport. min-height
+        // alone let .sky-svg's 480px max-height push the wheel section past one
+        // viewport on landscape mobile (~350px aperture), which created an
+        // intermediate scroll position between the wheel-end and the form-start.
+        height: 100%;
         flex: 0 0 auto;
     }
 
     // Release the wheel-col aspect-ratio cap so the section fills the aperture;
     // .sky-svg inside still renders square (its own aspect-ratio:1/1) and stays
-    // centered via the col's align-items:center.
+    // centered via the col's align-items:center. max-height: 100% caps the SVG
+    // to the aperture height — without it the .sky-svg's 480px max-* would let
+    // the wheel render taller than the section, overflowing into the form-col
+    // on cramped landscape phones.
     .sky-page .sky-wheel-col {
         aspect-ratio: auto;
         max-width: none;
-        max-height: none;
+        max-height: 100%;
         width: 100%;
+        overflow: hidden;
+
+        .sky-svg {
+            max-width: 100%;
+            max-height: 100%;
+        }
     }
 
     // form-col loses its grow/min-height fill so the snap basis (min-height:100%