Investigate tab resize

jpmorganchase · Feb 19, 2025 · 18e8a1c · 18e8a1c
1 parent 0c2b29b
commit 18e8a1c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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