fix: menubalk past op telefoon - afbeeldingenscherm opent niet meer per ongeluk (v0.3.61-beta)

- Op telefoons (≤600px) liep de menubalk 143px over: 💾 Opslaan en ⚙ Instellingen vielen buiten beeld en 🖼 (afbeeldingscatalogus) zat precies onder de duim, waardoor het schermvullende afbeeldingen/upload-scherm steeds per ongeluk opende
- Telefoon-balk toont nu alleen de essentie (🔊, 📁, 💾, ⚙); zoom en de catalogusknop verdwijnen daar - afbeeldingen blijven bereikbaar via het ＋-menu
- Afbeeldingscatalogus: titelbalk met sluitknop blijft vastgeplakt in beeld tijdens scrollen, en op mobiel 100dvh i.p.v. 100vh zodat er niets achter de browserbalk wegvalt
- Geverifieerd in iPhone-emulatie (5 checks): balk past volledig, opslaan/instellingen bereikbaar, sluitknop blijft zichtbaar, catalogus via ＋-menu

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0149FgUQvuwxKKEdvQGmNngF

VERSION

@@ -1 +1 @@
-0.3.60-beta
+0.3.61-beta

public/css/image-catalog.css

@@ -1,5 +1,7 @@
 .image-catalog-modal{width:min(1080px,96vw);max-height:94vh}
-.ic-tools{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(130px,.8fr)) auto;gap:8px;position:sticky;top:-24px;z-index:3;background:var(--surface);padding:8px 0 10px}
+/* titelbalk met ✕ blijft altijd in beeld, ook na scrollen in een lange grid */
+.image-catalog-modal .gallery-head{position:sticky;top:-24px;z-index:4;background:var(--surface);padding:4px 0 8px;margin-top:-4px}
+.ic-tools{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(130px,.8fr)) auto;gap:8px;position:sticky;top:12px;z-index:3;background:var(--surface);padding:8px 0 10px}
 .ic-tools input,.ic-tools select,.ic-add select,.ic-add input,.ic-editor input,.ic-editor select{min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface);color:var(--ink);font:inherit}
 .ic-quota{padding:8px 12px;margin-bottom:10px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:800}
 .ic-add{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface-2)}
@@ -24,8 +26,11 @@
 .img-quota-users{display:flex;flex-direction:column;gap:6px;margin-top:8px}
 body.hc .ic-card,body.hc .ic-add,body.hc .ic-tools input,body.hc .ic-tools select,body.hc .ic-editor{border-color:#000}
 @media(max-width:760px){
-  .image-catalog-modal{width:100vw;max-height:100vh;height:100vh;border-radius:0;padding:16px}
-  .ic-tools{top:-16px;grid-template-columns:1fr 1fr;padding-top:4px}.ic-search,.ic-folders{grid-column:1/-1}
+  /* dvh i.p.v. vh: met een dynamische browserbalk (telefoon) is 100vh hoger
+     dan het zichtbare scherm, waardoor titel en sluitknop wegvielen */
+  .image-catalog-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding:16px}
+  .image-catalog-modal .gallery-head{top:-16px}
+  .ic-tools{top:20px;grid-template-columns:1fr 1fr;padding-top:4px}.ic-search,.ic-folders{grid-column:1/-1}
   .ic-add-grid,.ic-editor-grid{grid-template-columns:1fr}.ic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
   .ic-choose{grid-template-rows:96px auto auto}.ic-choose img{height:96px}
   .img-quota-row{grid-template-columns:1fr 1fr}.img-quota-row .am-name{grid-column:1/-1}

public/css/teach.css

@@ -1333,10 +1333,18 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(
 
 /* ---------- telefoon (≤600px) ---------- */
 @media (max-width:600px){
-  #toolbar{padding:0 8px; gap:6px;}
+  #toolbar{padding:0 8px; gap:6px; overflow-x:auto;}
   /* alleen de uil op kleine schermen, woordmerk verdwijnt */
   .logo-word{display:none;}
   .tbtn{padding:0 10px; font-size:13px;}
+  /* de balk moet écht passen: zonder dit vielen 💾 Opslaan en ⚙ Instellingen
+     buiten beeld en zat 🖼 (afbeeldingscatalogus) precies onder de duim -
+     elke mis-tik opende dan het schermvullende afbeeldingenscherm. Zoom en
+     de catalogus zijn op een telefoon niet essentieel (de catalogus blijft
+     via het ＋-menu → afbeelding bereikbaar), opslaan toont alleen 💾. */
+  #btnZoomOut,#zoomPct,#btnZoomIn,#btnImages,#btnFs{display:none;}
+  #btnSave span{display:none;}
+  #userLbl{display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
 
   /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */
   .am-row{flex-direction:column; align-items:stretch;}

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.3.60-beta";
+const VERSION = "0.3.61-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;