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 { 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 (
!t.disabled && setTab(t)}> {t.text}
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 ; + return ; } const w = window.document.querySelector(".page")?.clientWidth;