fix(ui): die Seite rechnet die Höhe der HoneyOS-Leiste ab

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

@@ -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)',

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',
       }}

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={{

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

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;

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);

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">

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',