From 8ca115923199411a95fd9617e11b167048fa0427 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Sat, 13 Jun 2026 19:37:33 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20visualViewport=20resize=20=E2=86=92=20sc?=
 =?UTF-8?q?roll=20to=20bottom=20wenn=20Tastatur=20aufklappt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/tools/nachrichten.jsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/tools/nachrichten.jsx b/frontend/src/tools/nachrichten.jsx
index 04a5f2b..16d7ede 100644
--- a/frontend/src/tools/nachrichten.jsx
+++ b/frontend/src/tools/nachrichten.jsx
@@ -209,20 +209,35 @@ export default function Nachrichten({ toast, mobile, nav }) {
   // ── Scroll to bottom ─────────────────────────────────────────────────────────
   const prevLengthRef = useRef(0);
   const prevUserRef   = useRef(null);
+
+  function scrollToBottom(behavior = 'instant') {
+    bottomRef.current?.scrollIntoView({ behavior });
+  }
+
   useEffect(() => {
     if (!bottomRef.current) return;
-    const userChanged  = prevUserRef.current !== activeUser?.id;
-    const isFirstLoad  = prevLengthRef.current === 0 && messages.length > 0;
+    const userChanged = prevUserRef.current !== activeUser?.id;
+    const isFirstLoad = prevLengthRef.current === 0 && messages.length > 0;
     prevLengthRef.current = messages.length;
     prevUserRef.current   = activeUser?.id;
-    // Bei User-Wechsel oder erstem Laden: sofort ans Ende springen
     if (userChanged || isFirstLoad) {
-      bottomRef.current.scrollIntoView({ behavior: 'instant' });
+      scrollToBottom('instant');
     } else if (messages.length > 0) {
-      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+      scrollToBottom('smooth');
     }
   }, [messages.length, activeUser?.id]);
 
+  // Wenn Handy-Tastatur aufklappt (visualViewport schrumpft) → ans Ende scrollen
+  useEffect(() => {
+    if (!window.visualViewport) return;
+    const onResize = () => {
+      // Kleine Verzögerung damit Layout neu berechnet wird
+      setTimeout(() => scrollToBottom('instant'), 50);
+    };
+    window.visualViewport.addEventListener('resize', onResize);
+    return () => window.visualViewport.removeEventListener('resize', onResize);
+  }, []);
+
   // ── Handlers ─────────────────────────────────────────────────────────────────
   const loadUsers = async () => {
     try { const u = await api('/tools/nachrichten/users'); setUsers(u);