From 1240fe40fe2874e8d4ea9476971945ceb03e2a1f Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 14 Feb 2023 11:13:19 +0100
Subject: [PATCH] no wrap

---
 packages/app/src/Element/Tabs.css      |  3 ++-
 packages/app/src/Element/Tabs.tsx      | 19 +------------------
 packages/app/src/Pages/ProfilePage.tsx |  2 +-
 3 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/Element/Tabs.css b/packages/app/src/Element/Tabs.css
index 3b5d71d6..54cd1afc 100644
--- a/packages/app/src/Element/Tabs.css
+++ b/packages/app/src/Element/Tabs.css
@@ -6,6 +6,7 @@
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* Firefox */
   margin-bottom: 18px;
+  white-space: nowrap;
 }
 
 .tabs::-webkit-scrollbar {
@@ -18,7 +19,7 @@
   border-radius: 16px;
   font-weight: 600;
   font-size: 14px;
-  padding: 6px 8px;
+  padding: 6px 12px;
   text-align: center;
   font-feature-settings: "tnum";
 }
diff --git a/packages/app/src/Element/Tabs.tsx b/packages/app/src/Element/Tabs.tsx
index 4ecf6822..661ea67d 100644
--- a/packages/app/src/Element/Tabs.tsx
+++ b/packages/app/src/Element/Tabs.tsx
@@ -1,7 +1,5 @@
 import "./Tabs.css";
-import { useMemo } from "react";
 import useHorizontalScroll from "Hooks/useHorizontalScroll";
-import { CSSProperties } from "react";
 
 export interface Tab {
   text: string;
@@ -17,27 +15,12 @@ interface TabsProps {
 
 interface TabElementProps extends Omit<TabsProps, "tabs"> {
   t: Tab;
-  autoWidth?: boolean;
 }
 
-function clamp(n: number, min: number, max: number) {
-  if (n < min) {
-    return min;
-  }
-  if (n > max) {
-    return max;
-  }
-  return n;
-}
-
-export const TabElement = ({ autoWidth, t, tab, setTab }: TabElementProps) => {
-  const style = useMemo(() => {
-    return autoWidth ? ({ minWidth: `${clamp(t.text.length, 3, 8) * 16}px` } as CSSProperties) : {};
-  }, [t.text, autoWidth]);
+export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
   return (
     <div
       className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}
-      style={style}
       onClick={() => !t.disabled && setTab(t)}>
       {t.text}
     </div>
diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index d31da9ed..1a163122 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 autoWidth={true} key={v.value} t={v} tab={tab} setTab={setTab} />;
+    return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
   }
 
   const w = window.document.querySelector(".page")?.clientWidth;