Nachrichten: Header/Input fixiert, Auto-Scroll instant beim Laden, mobiler Leerraum fix

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))' } : {}),
   };
 

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 && (