Changeset d5b9d2a in Klonkt

Timestamp:

06/17/2026 01:59:24 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

dd80030

Parents:

8f6a61d

Message:

Fix: bottom tab scrolls with the page on mobile (overflow-x hidden→clip)

body (and on mobile body+html) had overflow-x:hidden. hidden automatically sets
the other axis to overflow:auto → body becomes a scroll container → position:fixed
(the bottom tab) becomes relative to it and scrolls along (visible e.g. on the
admin list). overflow-x:clip clips horizontally without creating that scroll context;
hidden stays as fallback for iOS <16. CSS cache-buster v6.

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

@@ -236 +236 @@
 body {
     margin: 0;
-    overflow-x: hidden;
+    /* 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) {
@@ -900 +904 @@
     }
 
-    /* v9.3 — Forceer niets schuift horizontaal weg */
+    /* 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;
+        overflow-x: hidden;   /* fallback iOS <16 */
+        overflow-x: clip;
     }
 }

src/views/shell.ejs

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