Stay at bottom

TODO.md

@@ -8,9 +8,9 @@
 
 
 
-- When resiszing the window and if im already at the bottom of the channel, i want to make sure i stay at the bottom of the channel.
+<!-- - When resiszing the window and if im already at the bottom of the channel, i want to make sure i stay at the bottom of the channel.
 
-- So right now in our search we can search and jump to messages. We can only jump to messages loaded in our chat already. How can we make it so we can jump to older messages not loaded in our chat at the moment?
+- So right now in our search we can search and jump to messages. We can only jump to messages loaded in our chat already. How can we make it so we can jump to older messages not loaded in our chat at the moment? -->
 
 
 - Are we using the encryped sql database to help load messages faster?

packages/shared/src/components/ChatArea.jsx

@@ -1265,6 +1265,19 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
         return () => scroller.removeEventListener('scroll', onScroll);
     }, [scrollerElRef.current]);
 
+    // Keep scroll pinned to bottom when the scroll container resizes (e.g. window resize)
+    useEffect(() => {
+        const scroller = scrollerElRef.current;
+        if (!scroller) return;
+        const observer = new ResizeObserver(() => {
+            if (!userIsScrolledUpRef.current && !isInitialLoadRef.current) {
+                scroller.scrollTop = scroller.scrollHeight;
+            }
+        });
+        observer.observe(scroller);
+        return () => observer.disconnect();
+    }, [scrollerElRef.current]);
+
     const saveSelection = () => {
         const sel = window.getSelection();
         if (sel.rangeCount > 0) savedRangeRef.current = sel.getRangeAt(0).cloneRange();