ChannelTabs: Dont Use Observer

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) =>

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);