From ff6dbc5c2e759331018fd0b61d3f0be8dd31c8fa Mon Sep 17 00:00:00 2001
From: Ramon <dev@ramonbesselink.nl>
Date: Thu, 23 Jul 2026 17:34:47 +0200
Subject: [PATCH] fix: voorkom witte onderstrook op mobiel

---
 VERSION               |  2 +-
 public/css/teach.css  | 16 ++++++++++++++--
 public/js/core.js     |  2 +-
 test/frontend.test.js |  8 ++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/VERSION b/VERSION
index 3ffd068..3e4db6e 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.4.52-beta
+0.4.53-beta
diff --git a/public/css/teach.css b/public/css/teach.css
index e3a0e08..3099d3d 100644
--- a/public/css/teach.css
+++ b/public/css/teach.css
@@ -43,8 +43,13 @@
   *::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;}
   body.dark ::-webkit-scrollbar-thumb{background:#3a4a70;}
   *::-webkit-scrollbar-track{background:transparent;}
-  html,body{height:100%; margin:0; overflow:hidden;}
+  /* 100% is de terugval voor oudere browsers; dvh volgt op telefoons de
+     daadwerkelijk zichtbare hoogte wanneer de browserbalk in- of uitschuift.
+     Doordat body een containing block is, gebruiken ook de absoluut
+     gepositioneerde bord-, leerling- en ouderweergaven deze zichtbare hoogte. */
+  html,body{height:100%; height:100dvh; margin:0; overflow:hidden;}
   body{
+    position:relative;
     font-family:"Quicksand","Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif;
     background:var(--bg); color:var(--ink); user-select:none;
   }
@@ -2043,7 +2048,14 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
    in de leerlingweergave en ook wanneer een widget zelf smal is.
    ============================================================ */
 @media(max-width:600px){
-  #pupilView{padding:8px;gap:12px}
+  /* De langere selector is nodig om de desktopregel
+     body.pupil-mode #pupilView werkelijk te overschrijven. De veilige
+     ondermarge houdt de laatste opdracht vrij van de mobiele browserbalk. */
+  body.pupil-mode #pupilView{
+    padding:8px 8px max(8px,env(safe-area-inset-bottom));
+    gap:12px;
+    overscroll-behavior:contain;
+  }
   #pupilView .pupil-card{width:100%!important;max-width:100%;min-width:0!important}
   .widget:not(.bare){max-width:calc(100% - 8px)}
   .widget-head{gap:4px;padding:6px 8px}
diff --git a/public/js/core.js b/public/js/core.js
index bb45334..4c1d6e0 100644
--- a/public/js/core.js
+++ b/public/js/core.js
@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.52-beta";
+const VERSION = "0.4.53-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;
diff --git a/test/frontend.test.js b/test/frontend.test.js
index a9ca698..32124a8 100644
--- a/test/frontend.test.js
+++ b/test/frontend.test.js
@@ -107,3 +107,11 @@ test('index.html: elk script heeft defer + cache-busting, font-preload blijft on
   assert.ok(server.indexOf('fastifyCompress') < server.indexOf('registerFrontend(app'),
     'compress hoort vóór de frontend-registratie');
 });
+
+test('mobiele leerlingweergave volgt de zichtbare viewport zonder witte onderstrook', async () => {
+  const css = await readFile(join(publicRoot, 'css', 'teach.css'), 'utf8');
+  assert.match(css, /html,body\{height:100%; height:100dvh;/);
+  assert.match(css, /body\{\s*position:relative;/);
+  const phone = css.slice(css.indexOf('Widgetinhoud op telefoonformaat'));
+  assert.match(phone, /body\.pupil-mode #pupilView\{[^}]*safe-area-inset-bottom[^}]*overscroll-behavior:contain;/);
+});