From 481d941b65913385d46d0eb73685db5b9b7375cb Mon Sep 17 00:00:00 2001
From: thororen <78185467+thororen1234@users.noreply.github.com>
Date: Sat, 26 Sep 2026 21:25:27 -0400
Subject: [PATCH] ChannelTabs: Dont Use Observer

---
 .../components/ChannelTabsContainer.tsx       | 25 +------------------
 src/equicordplugins/channelTabs/style.css     |  6 +++++
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
index be300fc28..96633e35b 100644
--- a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
+++ b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
@@ -28,7 +28,6 @@ const cl = classNameFactory("vc-channeltabs-");
 
 export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     const [userId, setUserId] = useState("");
-    const [tabsOverflow, setTabsOverflow] = useState(false);
     const {
         showBookmarkBar,
         widerTabsAndBookmarks,
@@ -107,7 +106,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     }, []);
 
     const ref = useRef<HTMLDivElement>(null);
-    const scrollerRef = useRef<HTMLDivElement>(null);
     const currentChannelRef = useRef(props);
     currentChannelRef.current = props;
 
@@ -141,26 +139,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     useEffect(() => {
         _update();
     }, [widerTabsAndBookmarks]);
-    useEffect(() => {
-        const scroller = scrollerRef.current;
-        if (!scroller) return;
-
-        const checkOverflow = () => {
-            if (!newTabButtonBehavior) {
-                setTabsOverflow(true);
-                return;
-            }
-            const overflow = scroller.scrollWidth > scroller.clientWidth;
-            setTabsOverflow(overflow);
-        };
-
-        checkOverflow();
-
-        const observer = new ResizeObserver(checkOverflow);
-        observer.observe(scroller);
-
-        return () => observer.disconnect();
-    }, [openedTabs.length, newTabButtonBehavior]);
 
     useEffect(() => {
         const matchesKeybind = (event: KeyboardEvent, keybindString: string): boolean => {
@@ -296,7 +274,7 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
 
     if (isFullscreen) return null;
 
-    const shouldFollowNewTabButton = newTabButtonBehavior && !tabsOverflow;
+    const shouldFollowNewTabButton = newTabButtonBehavior;
     const newTabButton = (
         <button
             onClick={() => createTab(props, true)}
@@ -340,7 +318,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
             </>}
             <div className={cl("tab-container")}>
                 <HorizontalScroller
-                    customRef={node => { scrollerRef.current = node; }}
                     className={cl("tab-scroller", shouldFollowNewTabButton && "tab-scroller-following")}
                 >
                     {openedTabs.filter(tab => tab != null).map((tab, i) =>
diff --git a/src/equicordplugins/channelTabs/style.css b/src/equicordplugins/channelTabs/style.css
index a718f6066..5b90c177d 100644
--- a/src/equicordplugins/channelTabs/style.css
+++ b/src/equicordplugins/channelTabs/style.css
@@ -442,6 +442,12 @@
     flex-shrink: 0;
 }
 
+.vc-channeltabs-tab-scroller-following .vc-channeltabs-new-button {
+    position: sticky;
+    right: 0;
+    z-index: 1;
+}
+
 .vc-channeltabs-new-button:hover {
     background-color: var(--background-mod-subtle);
     transform: scale(1.1);