fix(leiste): die Aussparung des Geraets gehoert der Leiste

Aether und InkNote setzen viewport-fit=cover — als installierte App reicht ihr
Inhalt bis unter die Statusleiste. Eine Leiste, die stur bei 0 anfaengt, liegt
dort unter Uhrzeit und Akkustand. Sie waechst jetzt um env(safe-area-inset-top)
und polstert sich selbst; im Browser ist der Wert null und alles bleibt bei
32 px.

Das Polster der Seite wird dabei nicht mehr ausgerechnet, sondern gerechnet:
env() kennt nur der Browser, und erst beim Anzeigen. Nebenbei behebt das einen
Rundungsfehler beim Ausblenden — der urspruengliche Wert wird jetzt gemerkt
statt zurueckgerechnet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

main.go

@@ -27,7 +27,7 @@ const localSub = "local"
 // Version ist die einzige Stelle, an der sie steht. build.sh liest sie hier aus
 // und vergibt denselben Docker-Tag; die Oberfläche holt sie über /api/public.
 // Vorher stand sie zusätzlich in os.js und lief mit den Image-Tags auseinander.
-const Version = "0.6"
+const Version = "0.7"
 
 type Config struct {
 	Addr          string

web/honeybar/honeybar.js

@@ -54,13 +54,25 @@
 
   let apps = DEFAULT_APPS;
   let settings = null;
+  // Was die Seite oben schon hatte, bevor die Leiste sie heruntergeschoben hat.
+  let urspruenglichesPolster = null;
 
   /* ── Aufbau ───────────────────────────────────────────────────────────── */
 
+  // Als installierte App liegt der Inhalt unter der Statusleiste des Geraets
+  // (die Apps setzen viewport-fit=cover, damit der Hintergrund bis an den Rand
+  // reicht). Eine Leiste, die stur bei 0 anfaengt, liegt dort unter Uhrzeit und
+  // Akkustand. Deshalb waechst sie um die Aussparung und polstert sich selbst;
+  // im Browser ist env() null und alles bleibt bei 32 px.
+  const SAFE = "env(safe-area-inset-top, 0px)";
+  const HOEHE = "calc(" + BAR_H + "px + " + SAFE + ")";
+
   const host = document.createElement("honey-bar");
   host.style.cssText = [
     "position:fixed", "top:0", "left:0", "right:0",
-    "height:" + BAR_H + "px",
+    "height:" + HOEHE,
+    "padding-top:" + SAFE,
+    "box-sizing:border-box",
     "z-index:2147483000",
     "display:block",
     "color-scheme:dark",
@@ -250,10 +262,15 @@
 
     // Der Seite Platz verschaffen. `--honeybar-h` steht bereit, falls eine App
     // ihre eigene 100vh-Rechnung anpassen muss (siehe README).
-    document.documentElement.style.setProperty("--honeybar-h", BAR_H + "px");
+    document.documentElement.style.setProperty("--honeybar-h", HOEHE);
     if (pushMode === "body") {
+      // Nicht ausrechnen, sondern rechnen lassen: env() kennt nur der Browser,
+      // und erst beim Anzeigen. Der vorherige Wert bleibt als Summand stehen,
+      // damit eine App mit eigenem Innenabstand ihn nicht verliert.
       const cs = getComputedStyle(document.body);
-      document.body.style.paddingTop = parseFloat(cs.paddingTop || 0) + BAR_H + "px";
+      urspruenglichesPolster = cs.paddingTop || "0px";
+      document.body.style.paddingTop =
+        "calc(" + urspruenglichesPolster + " + var(--honeybar-h))";
     }
 
     render();
@@ -305,7 +322,8 @@
     if (nub) return;
     nub = document.createElement("honey-bar-nub");
     nub.style.cssText = [
-      "position:fixed", "top:0", "left:0", "right:0", "height:3px",
+      "position:fixed", "left:0", "right:0", "height:3px",
+      "top:" + SAFE,
       "z-index:2147483000", "cursor:pointer", "display:block",
     ].join(";");
     nub.title = "HoneyOS-Leiste einblenden";
@@ -342,9 +360,9 @@
 
   function unmount() {
     host.remove();
-    if (pushMode === "body") {
-      const cs = getComputedStyle(document.body);
-      document.body.style.paddingTop = Math.max(0, parseFloat(cs.paddingTop || 0) - BAR_H) + "px";
+    if (pushMode === "body" && urspruenglichesPolster !== null) {
+      document.body.style.paddingTop = urspruenglichesPolster;
+      urspruenglichesPolster = null;
     }
     document.documentElement.style.removeProperty("--honeybar-h");
   }