Changeset c3ad46d in Klonkt

Timestamp:

06/17/2026 02:07:28 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

93d6345

Parents:

dd80030

Message:

Fix: horizontal clipping on html (not body) — no h-scroll + fixed bottom tab correct

Previous fix (overflow-x:clip on html) doesn't clip reliably at viewport level →
horizontal scroll returned + the fixed bar was mispositioned. Now:

• html { overflow-x: hidden } → propagates to the viewport (no h-scroll), does NOT break position:fixed (html is the document scroller anyway).
• body gets NO overflow-x → doesn't become a second scroll container → bottom tab stays fixed while scrolling.

CSS cache-buster v7.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -233 +233 @@
 
 * { box-sizing: border-box; }
-html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
+html {
+    -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
+    overscroll-behavior-y: none;
+    /* Horizontaal clippen op ROOT-niveau: dit propageert naar de viewport (geen
+       horizontale scroll) ZONDER position:fixed te breken — html is sowieso de
+       document-scroller. De body mag GEEN overflow-x krijgen, want dan zou die een
+       tweede scroll-container worden en zou de fixed bottom-tab meeschuiven. */
+    overflow-x: hidden;
+}
 body {
     margin: 0;
-    /* clip i.p.v. hidden: hidden zet overflow-y automatisch op 'auto' → de body
-       wordt een scroll-container → op mobiel schuift position:fixed (bottom-tab)
-       mee bij scrollen. clip clipt horizontaal zonder dat effect. */
-    overflow-x: hidden;   /* fallback oudere browsers */
-    overflow-x: clip;
 }
 body:not(.admin) {
@@ -904 +907 @@
     }
 
-    /* v9.3 — Forceer niets schuift horizontaal weg.
-       clip i.p.v. hidden: clipt zonder een scroll-container te maken, zodat
-       position:fixed (bottom-tab) niet meeschuift bij scrollen op mobiel. */
-    body, html {
-        overflow-x: hidden;   /* fallback iOS <16 */
-        overflow-x: clip;
-    }
+    /* v9.3 — horizontaal clippen gebeurt nu globaal op html (zie de html-regel
+       bovenaan). Hier bewust NIETS op body zetten: body als scroll-container zou
+       de fixed bottom-tab op mobiel laten meeschuiven. */
 }
 

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=6">
+<link rel="stylesheet" href="/assets/css/style.css?v=7">
 
 <!-- Audio player styles: loaded on every page so the mini-player works