VERSION

@@ -1 +1 @@
-0.4.52-beta
+0.4.53-beta

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}

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;

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;/);
+});