public/css/teach.css

@@ -1362,8 +1362,10 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(
      ＋- of bordenknop, waardoor "steeds" het bordenpaneel of ＋-menu
      (→ afbeeldingenscherm) opende. Nu ligt de tekenbalk in een eigen laag
      bóven de knoppenrij (hij groeit omhoog, dus dit klopt bij elke
-     schermbreedte), en houden ＋ en borden de onderrand voor zichzelf. */
-  #hud{left:8px; right:8px; bottom:88px; transform:none; max-width:none; justify-content:center;}
+     schermbreedte), en houden ＋ en borden de onderrand voor zichzelf.
+     Gecentreerd op inhoudsbreedte (geen vaste randen), zodat de balk
+     geminimaliseerd ook echt smal is. */
+  #hud{bottom:88px; max-width:calc(100vw - 16px);}
 
   /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */
   .am-row{flex-direction:column; align-items:stretch;}

public/js/board.js

@@ -508,7 +508,9 @@ function refreshPenbar(){
   penbar.querySelector('[data-picker="sizes"] .pen-current').title = T("penSize");
   const currentBg = penbar.querySelector(".pen-current-bg");
   currentBg.className = "pen-current-bg bg-"+BOARD.bg;
-  penbar.querySelector('[data-picker="backgrounds"] .pen-current').title = T(PEN_BGS.find(x=>x[0]===BOARD.bg)[1]);
+  /* onbekende (oude/corrupte) bg-waarde mag nooit de hele hydrate laten
+     crashen - dat logde de gebruiker stilletjes uit bij het verversen */
+  penbar.querySelector('[data-picker="backgrounds"] .pen-current').title = T((PEN_BGS.find(x=>x[0]===BOARD.bg) || PEN_BGS[0])[1]);
   penbar.querySelector('[data-picker="extras"] .pen-current').title = T("penExtras");
   penbar.querySelector(".pen-recent-label").textContent = T("recentColors");
   penbar.querySelector(".pen-palette-label").textContent = T("paletteColors");

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

public/js/widgets/anchor.js

@@ -121,21 +121,13 @@ function mountAnchor(root, initState, opts){
             setPic(pic, wPic);
           }else{
             /* no automatic match (or not tried yet) - stays empty, but doubles as a
-               shortcut to manually pick a picture instead of showing a fake anchor icon */
+               shortcut to manually pick a picture instead of showing a fake anchor icon.
+               Geen eigen pointer/click-handlers meer: die blokkeerden het pannen en
+               openden de kiezer bij elke veeg die op dit vak begon (op telefoons was
+               dat vrijwel elke aanraking). De tik loopt nu via de stage-logica
+               hieronder, mét de sleep-drempel. */
             pic.classList.add("an-pic-empty");
-            if(!readonly){
-              pic.title = T("pickPic");
-              pic.addEventListener("pointerdown", ev=>ev.stopPropagation());
-              pic.addEventListener("click", ev=>{
-                ev.stopPropagation();
-                openPicPicker(normWord, chosen=>{
-                  S.pics[normWord] = chosen;
-                  syncSource();
-                  render();
-                  persistWords();
-                });
-              });
-            }
+            if(!readonly) pic.title = T("pickPic");
           }
           c.appendChild(pic);
           const span = document.createElement("span");
@@ -180,7 +172,8 @@ function mountAnchor(root, initState, opts){
     stage.setPointerCapture(e.pointerId);
     const sc = stage.getBoundingClientRect().width / stage.offsetWidth;
     pd = { x:e.clientX/sc, y:e.clientY/sc, px:S.pan.x, py:S.pan.y,
-           moved:false, target:e.target.closest(".an-cell"), sc };
+           moved:false, target:e.target.closest(".an-cell"),
+           pic:e.target.closest(".an-pic-empty"), sc };
   });
   stage.addEventListener("pointermove", e=>{
     if(!pd) return;
@@ -190,10 +183,25 @@ function mountAnchor(root, initState, opts){
   });
   stage.addEventListener("pointerup", ()=>{
     if(!pd) return;
-    const {moved, target} = pd;
+    const {moved, target, pic} = pd;
     pd = null;
     if(moved){ render(); return; }
-    if(target && !readonly) editCell(target);
+    if(readonly || !target) return;
+    /* stilstaande tik op een leeg plaatjesvak: plaatje kiezen voor dat woord */
+    if(pic){
+      const cell = S.cells[key(+target.dataset.gx, +target.dataset.gy)];
+      const normWord = cell && cell.t && cell.t.trim().toLowerCase();
+      if(normWord){
+        openPicPicker(normWord, chosen=>{
+          S.pics[normWord] = chosen;
+          syncSource();
+          render();
+          persistWords();
+        });
+        return;
+      }
+    }
+    editCell(target);
   });
   stage.addEventListener("pointercancel", ()=>{
     const moved = pd && pd.moved;