From 4f0d353956c3fa284eeaa0a332f06705a66ad5d1 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Thu, 28 May 2026 15:21:32 +0200
Subject: [PATCH] Nachrichten: Header/Input fixiert, Auto-Scroll instant beim
 Laden, mobiler Leerraum fix

---
 frontend/src/App.jsx               |  6 ++++--
 frontend/src/tools/nachrichten.jsx | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5137986..4823c94 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1664,8 +1664,10 @@ export default function App() {
   const mainStyle = {
     flex:1,
     overflowY: (mobile && isNachrichten) ? 'hidden' : 'auto',
-    display: (mobile && isNachrichten) ? 'flex' : undefined,
-    flexDirection: (mobile && isNachrichten) ? 'column' : undefined,
+    ...(mobile && isNachrichten ? {
+      height: 'calc(100dvh - 56px - env(safe-area-inset-bottom, 0px))',
+      display:'flex', flexDirection:'column',
+    } : {}),
     ...(mobile && !isNachrichten ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}),
   };
 
diff --git a/frontend/src/tools/nachrichten.jsx b/frontend/src/tools/nachrichten.jsx
index 064fa3f..bb25d87 100644
--- a/frontend/src/tools/nachrichten.jsx
+++ b/frontend/src/tools/nachrichten.jsx
@@ -173,8 +173,12 @@ export default function Nachrichten({ toast, mobile }) {
   }, [messages, sharedKey]);
 
   // ── Scroll to bottom ─────────────────────────────────────────────────────────
+  const prevLengthRef = useRef(0);
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    const isFirstLoad = prevLengthRef.current === 0 && messages.length > 0;
+    prevLengthRef.current = messages.length;
+    if (!bottomRef.current) return;
+    bottomRef.current.scrollIntoView({ behavior: isFirstLoad ? 'instant' : 'smooth' });
   }, [messages.length]);
 
   // ── Handlers ─────────────────────────────────────────────────────────────────
@@ -193,6 +197,7 @@ export default function Nachrichten({ toast, mobile }) {
     setActiveUser(u);
     setMessages([]);
     setDecrypted({});
+    prevLengthRef.current = 0;
   };
 
   const send = async (overrideText) => {
@@ -239,8 +244,8 @@ export default function Nachrichten({ toast, mobile }) {
   );
 
   return (
-    <div style={{ display:'flex', flex:1, height: mobile ? '100%' : '100vh',
-      overflow:'hidden', background:'#111114' }}>
+    <div style={{ display:'flex', height: mobile ? '100%' : '100vh',
+      overflow:'hidden', background:'#111114', flex: mobile ? 1 : undefined }}>
 
       {/* ── Konversationsliste ─────────────────────────────────────────── */}
       {showList && (