From f590fd6081e9fbe9b8ef4444c1edb459ed286405 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 14 Feb 2023 00:30:50 +0100
Subject: [PATCH] auto tabs only on profile

---
 packages/app/src/Element/Tabs.tsx      | 7 ++++---
 packages/app/src/Pages/ProfilePage.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/Element/Tabs.tsx b/packages/app/src/Element/Tabs.tsx
index c305d94f..4ecf6822 100644
--- a/packages/app/src/Element/Tabs.tsx
+++ b/packages/app/src/Element/Tabs.tsx
@@ -17,6 +17,7 @@ interface TabsProps {
 
 interface TabElementProps extends Omit<TabsProps, "tabs"> {
   t: Tab;
+  autoWidth?: boolean;
 }
 
 function clamp(n: number, min: number, max: number) {
@@ -29,10 +30,10 @@ function clamp(n: number, min: number, max: number) {
   return n;
 }
 
-export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
+export const TabElement = ({ autoWidth, t, tab, setTab }: TabElementProps) => {
   const style = useMemo(() => {
-    return { minWidth: `${clamp(t.text.length, 3, 8) * 14}px` } as CSSProperties;
-  }, [t.text]);
+    return autoWidth ? ({ minWidth: `${clamp(t.text.length, 3, 8) * 16}px` } as CSSProperties) : {};
+  }, [t.text, autoWidth]);
   return (
     <div
       className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}
diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index 1a163122..d31da9ed 100644
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@@ -301,7 +301,7 @@ export default function ProfilePage() {
   }
 
   function renderTab(v: Tab) {
-    return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
+    return <TabElement autoWidth={true} key={v.value} t={v} tab={tab} setTab={setTab} />;
   }
 
   const w = window.document.querySelector(".page")?.clientWidth;