From a9490f7bd45ac49feb03acbdd7c7f15df27fb250 Mon Sep 17 00:00:00 2001
From: Bryan1029384756 <23323626+Bryan1029384756@users.noreply.github.com>
Date: Wed, 18 Feb 2026 10:57:06 -0600
Subject: [PATCH] Stay at bottom

---
 TODO.md                                     |  4 ++--
 packages/shared/src/components/ChatArea.jsx | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index e61dc2c..f9b101b 100644
--- a/TODO.md
+++ b/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?
\ No newline at end of file
diff --git a/packages/shared/src/components/ChatArea.jsx b/packages/shared/src/components/ChatArea.jsx
index dda224e..e566c59 100644
--- a/packages/shared/src/components/ChatArea.jsx
+++ b/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();