no wrap

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";
 }

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) {
+export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
-  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]);
   return (
     <div
       className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}
-      style={style}
       onClick={() => !t.disabled && setTab(t)}>
       {t.text}
     </div>

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;