From d6b9d6a1cee6762baf455aa245d7c5ec43c9e7f9 Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Mon, 24 Aug 2026 23:40:34 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20die=20Seite=20rechnet=20die=20H?=
 =?UTF-8?q?=C3=B6he=20der=20HoneyOS-Leiste=20ab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Leiste liegt fest am oberen Rand und schiebt den Inhalt herunter. Wer
danach noch mit 100vh rechnete, war genau um ihre Höhe zu hoch — am Rechner
eine Bildlaufleiste, die es vorher nicht gab. Und wer selbst fest am oberen
Rand klebte (Seitenleiste am Handy, Vorschau, Office), lag darunter und war
verdeckt.

--honeybar-h setzt die Leiste selbst auf <html>; ohne sie ist der Wert 0 und
alles bleibt wie zuvor. Drei Hilfsklassen in index.css halten das an einer
Stelle zusammen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/App.tsx                     |  2 +-
 frontend/src/components/FilePreview.tsx  |  2 +-
 frontend/src/components/OfficeEditor.tsx |  2 +-
 frontend/src/components/Shell.tsx        |  2 +-
 frontend/src/components/Sidebar.tsx      |  4 ++--
 frontend/src/index.css                   | 12 ++++++++++++
 frontend/src/pages/LoginPage.tsx         |  2 +-
 frontend/src/pages/SharePage.tsx         |  2 +-
 8 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 64d3bba..248a269 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -45,7 +45,7 @@ function AuthedApp() {
 
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div className="aether-minvh" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <div style={{
           width: 32, height: 32,
           border: '2px solid var(--color-primary)',
diff --git a/frontend/src/components/FilePreview.tsx b/frontend/src/components/FilePreview.tsx
index 59559cf..5ed740e 100644
--- a/frontend/src/components/FilePreview.tsx
+++ b/frontend/src/components/FilePreview.tsx
@@ -172,7 +172,7 @@ export default function FilePreview({ file, onPrev, onNext, onClose, onSaved, se
     <div
       onClick={tryClose}
       style={{
-        position: 'fixed', inset: 0, zIndex: 100,
+        position: 'fixed', inset: 'var(--honeybar-h) 0 0 0', zIndex: 100,
         background: 'rgba(0,0,0,0.82)',
         display: 'flex', flexDirection: 'column',
       }}
diff --git a/frontend/src/components/OfficeEditor.tsx b/frontend/src/components/OfficeEditor.tsx
index 73b880c..a39bdd5 100644
--- a/frontend/src/components/OfficeEditor.tsx
+++ b/frontend/src/components/OfficeEditor.tsx
@@ -53,7 +53,7 @@ export default function OfficeEditor({ file, onClose }: {
 
   return (
     <div style={{
-      position: 'fixed', inset: 0, zIndex: 120,
+      position: 'fixed', inset: 'var(--honeybar-h) 0 0 0', zIndex: 120,
       background: 'var(--color-background)', display: 'flex', flexDirection: 'column',
     }}>
       <div style={{
diff --git a/frontend/src/components/Shell.tsx b/frontend/src/components/Shell.tsx
index 08f146b..2a6f89b 100644
--- a/frontend/src/components/Shell.tsx
+++ b/frontend/src/components/Shell.tsx
@@ -61,7 +61,7 @@ export default function Shell({ user, onLogout, onUserChanged }: Props) {
       onLogout,
       onOpenSidebar: () => setSidebarOpen(true),
     }}>
-    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
+    <div className="aether-vh" style={{ display: 'flex', overflow: 'hidden' }}>
       {/* Mobile overlay */}
       {sidebarOpen && (
         <div
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ef59e83..aa6e5d1 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -761,14 +761,14 @@ export default function Sidebar({ user, view, activeTagId, onOpenTag, onTrashDro
           flex-direction: column;
           background: var(--color-surface);
           border-right: 1px solid var(--color-border);
-          height: 100vh;
+          height: calc(100vh - var(--honeybar-h));
           overflow-y: auto;
           overflow-x: hidden;
         }
         @media (max-width: 767px) {
           .aether-sidebar {
             position: fixed;
-            top: 0; left: 0;
+            top: var(--honeybar-h); left: 0;
             z-index: 50;
             transform: translateX(-100%);
             transition: transform 0.2s ease;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3dd449b..eb6a82e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -60,8 +60,20 @@ body {
   --safe-top: 0px;
   --safe-bottom: 0px;
   --safe-left: 0px;
+  /* Höhe der HoneyOS-Leiste. Sie setzt den Wert selbst auf <html>, sobald sie
+     da ist; hier steht er, damit calc() auch ohne sie aufgeht. */
+  --honeybar-h: 0px;
 }
 
+/* Die Leiste liegt fest am oberen Rand und schiebt den Seiteninhalt herunter.
+   Wer mit der vollen Fensterhöhe rechnet, muss sie abziehen — sonst ist die
+   Seite genau um die Leistenhöhe zu hoch und bekommt eine Bildlaufleiste.
+   Wer fest am oberen Rand klebt, muss unter ihr anfangen — sonst verdeckt sie
+   ihn (am Handy fällt das sofort auf, dort ist jede Zeile kostbar). */
+.aether-vh     { height:     calc(100vh - var(--honeybar-h)); }
+.aether-minvh  { min-height: calc(100vh - var(--honeybar-h)); }
+.aether-full   { position: fixed; inset: var(--honeybar-h) 0 0 0; }
+
 @media (display-mode: standalone) {
   :root {
     --safe-top:    env(safe-area-inset-top, 0px);
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 4ee846d..4c7e1f2 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -34,7 +34,7 @@ export default function LoginPage({ onLogin }: Props) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center px-4">
+    <div className="aether-minvh flex items-center justify-center px-4">
       <div className="w-full max-w-sm">
         {/* Logo / branding */}
         <div className="text-center mb-8">
diff --git a/frontend/src/pages/SharePage.tsx b/frontend/src/pages/SharePage.tsx
index 971e1bd..a191583 100644
--- a/frontend/src/pages/SharePage.tsx
+++ b/frontend/src/pages/SharePage.tsx
@@ -59,7 +59,7 @@ export default function SharePage({ token }: Props) {
 
   return (
     <div style={{
-      minHeight: '100vh',
+      minHeight: 'calc(100vh - var(--honeybar-h))',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',