From a63701f7d086ef73cef9879a700d54ada53e3c01 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 13 Feb 2023 23:18:09 +0100
Subject: [PATCH] djust tabs

---
 packages/app/src/Element/Tabs.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Element/Tabs.tsx b/packages/app/src/Element/Tabs.tsx
index f3a0ead8..ab51c17e 100644
--- a/packages/app/src/Element/Tabs.tsx
+++ b/packages/app/src/Element/Tabs.tsx
@@ -1,4 +1,5 @@
 import "./Tabs.css";
+import { useMemo } from "react";
 import useHorizontalScroll from "Hooks/useHorizontalScroll";
 import { CSSProperties } from "react";
 
@@ -18,8 +19,20 @@ interface TabElementProps extends Omit<TabsProps, "tabs"> {
   t: Tab;
 }
 
+function clamp(n: number, min: number, max: number) {
+  if (n < min) {
+    return min;
+  }
+  if (n > max) {
+    return max;
+  }
+  return n;
+}
+
 export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
-  const style = { minWidth: `${t.text.length * 0.6}em` } as CSSProperties;
+  const style = useMemo(() => {
+    return { minWidth: `${clamp(t.text.length, 2, 7)}em` } as CSSProperties;
+  }, [t.text]);
   return (
     <div
       className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}