v0.12.31 multiple UI changes

frontend/src/components/ChatWindow.jsx

@@ -39,6 +39,18 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
     return () => window.removeEventListener('resize', onResize);
   }, []);
 
+  // On mobile, when the soft keyboard opens the visual viewport shrinks but the
+  // messages-container scroll position stays where it was, leaving the latest
+  // messages hidden behind the keyboard.  Scroll to bottom whenever the visual
+  // viewport resizes (keyboard appear/dismiss) so the last message stays visible.
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const onVVResize = () => scrollToBottom();
+    vv.addEventListener('resize', onVVResize);
+    return () => vv.removeEventListener('resize', onVVResize);
+  }, [scrollToBottom]);
+
   useEffect(() => {
     api.getSettings().then(({ settings }) => {
       setIconGroupInfo(settings.icon_groupinfo || '');
@@ -339,7 +351,7 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
           This channel is read-only
         </div>
       ) : (
-        <MessageInput group={group} currentUser={currentUser} onSend={handleSend} socket={socket} replyTo={replyTo} onCancelReply={() => setReplyTo(null)} onTyping={() => {}} onTextChange={val => onHasTextChange?.(!!val.trim())} />
+        <MessageInput group={group} currentUser={currentUser} onSend={handleSend} socket={socket} replyTo={replyTo} onCancelReply={() => setReplyTo(null)} onTyping={() => {}} onTextChange={val => onHasTextChange?.(!!val.trim())} onInputFocus={() => scrollToBottom()} />
       )}
     </div>
       {showInfo && (