From 18e8a1c8ef925dc89e5e13161d35c052817a02bf Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Wed, 19 Feb 2025 16:05:55 +0000
Subject: [PATCH] Investigate tab resize

---
 packages/lab/src/tabs-next/TabListNext.css     |  1 +
 .../lab/src/tabs-next/hooks/useOverflow.ts     | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/lab/src/tabs-next/TabListNext.css b/packages/lab/src/tabs-next/TabListNext.css
index 2faae54a22d..e88c7be8f7f 100644
--- a/packages/lab/src/tabs-next/TabListNext.css
+++ b/packages/lab/src/tabs-next/TabListNext.css
@@ -9,6 +9,7 @@
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   gap: var(--salt-spacing-100);
   max-width: 100%;
+  width: 100%;
 }
 
 .saltTabListNext-center {
diff --git a/packages/lab/src/tabs-next/hooks/useOverflow.ts b/packages/lab/src/tabs-next/hooks/useOverflow.ts
index cecb8965f22..b2045ec62fd 100644
--- a/packages/lab/src/tabs-next/hooks/useOverflow.ts
+++ b/packages/lab/src/tabs-next/hooks/useOverflow.ts
@@ -102,7 +102,7 @@ export function useOverflow({
           }
         }
 
-        return Math.max(1, newVisibleCount);
+        return Math.max(0, newVisibleCount);
       }
       return visibleCount;
     };
@@ -137,6 +137,18 @@ export function useOverflow({
     updateOverflow();
   }, [selected]);
 
+  useIsomorphicLayoutEffect(() => {
+    const handleWindowResize = () => {
+      updateOverflow();
+    };
+
+    targetWindow?.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      targetWindow?.removeEventListener("resize", handleWindowResize);
+    };
+  });
+
   useEffect(() => {
     const element = container?.current;
     if (!element) return;
@@ -163,8 +175,8 @@ export function useOverflow({
   }, [container, updateOverflow]);
 
   const childArray = useMemo(() => Children.toArray(children), [children]);
-  const visible = childArray.slice(0, visibleCount || 1);
-  const hidden = childArray.slice(visibleCount || 1);
+  const visible = childArray.slice(0, visibleCount);
+  const hidden = childArray.slice(visibleCount);
 
   const hiddenSelectedIndex = hidden.findIndex(
     // @ts-ignore