From 06ba3a1732f72fa6435dd1250c8e9f89e4a4c9c3 Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hi@bpier.re>
Date: Sat, 27 Apr 2024 01:29:04 +0100
Subject: [PATCH] Tabs: refresh selection rectangle when items update

---
 .../src/Tabs/1. Default.fixture.tsx           | 26 +++++++++++++------
 frontend/uikit/src/Tabs/Tabs.tsx              |  7 ++++-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx b/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx
index a9ec7380..c745bae1 100644
--- a/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx	
+++ b/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx	
@@ -1,16 +1,22 @@
 "use client";
 
 import { Tabs } from "@liquity2/uikit";
-import { useState } from "react";
-
-const items = [
-  { label: "Deposit", panelId: "deposit", tabId: "deposit" },
-  { label: "Withdraw", panelId: "withdraw", tabId: "withdraw" },
-  { label: "Claim Rewards", panelId: "claimRewards", tabId: "claimRewards" },
-];
+import { useEffect, useState } from "react";
+import { useFixtureInput } from "react-cosmos/client";
 
 export default function Fixture() {
   const [selected, setSelected] = useState(0);
+  const [tabs] = useFixtureInput("tabs", 3);
+  const items = Array.from(
+    { length: Math.max(2, tabs) },
+    (_, i) => `Item ${i + 1}`,
+  );
+
+  const [idPrefix, setIdPrefix] = useState("");
+  useEffect(() => {
+    setIdPrefix(String(Date.now()));
+  }, [tabs]);
+
   return (
     <div
       style={{
@@ -21,7 +27,11 @@ export default function Fixture() {
       }}
     >
       <Tabs
-        items={items}
+        items={items.map((label, index) => ({
+          label,
+          panelId: `${idPrefix}${index}-panel`,
+          tabId: `${idPrefix}${index}-tab`,
+        }))}
         onSelect={setSelected}
         selected={selected}
       />
diff --git a/frontend/uikit/src/Tabs/Tabs.tsx b/frontend/uikit/src/Tabs/Tabs.tsx
index 3734261d..8d8d1a7e 100644
--- a/frontend/uikit/src/Tabs/Tabs.tsx
+++ b/frontend/uikit/src/Tabs/Tabs.tsx
@@ -77,6 +77,7 @@ export function Tabs({
   }, [
     selected,
     width, // update on container width change too
+    items,
   ]);
 
   return (
@@ -84,6 +85,7 @@ export function Tabs({
       ref={container}
       role="tablist"
       className={css({
+        overflow: "hidden",
         display: "flex",
         width: "100%",
         height: 44,
@@ -171,10 +173,13 @@ function Tab({
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        padding: 0,
+        padding: "0 16px",
         fontSize: 16,
         color: "interactive",
         cursor: "pointer",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
         _active: {
           translate: "0 1px",
         },