From 77089fcdd6776169322631b15932fef15c51a656 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Mon, 8 Dec 2025 21:48:09 +0100
Subject: [PATCH] style: Hide labels of tabs on smaller screens

---
 apps/web/src/pages/settings/index.tsx     | 4 ++--
 packages/ui/src/components/atoms/Tabs.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/settings/index.tsx b/apps/web/src/pages/settings/index.tsx
index ddf248d..59cb397 100644
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -368,9 +368,9 @@ export default function Settings() {
               {buildTabs({billingEnabled, smtpEnabled}).map(tab => {
                 const Icon = tab.icon;
                 return (
-                  <TabsTrigger key={tab.id} value={tab.id} className="flex items-center gap-2">
+                  <TabsTrigger key={tab.id} value={tab.id} className="flex items-center gap-2" title={tab.label}>
                     <Icon className="h-4 w-4" />
-                    {tab.label}
+                    <span className="hidden md:inline">{tab.label}</span>
                   </TabsTrigger>
                 );
               })}
diff --git a/packages/ui/src/components/atoms/Tabs.tsx b/packages/ui/src/components/atoms/Tabs.tsx
index 74193b0..8c150ef 100644
--- a/packages/ui/src/components/atoms/Tabs.tsx
+++ b/packages/ui/src/components/atoms/Tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-neutral-100 p-1 text-neutral-500',
+      'inline-flex h-10 items-center justify-start rounded-md bg-neutral-100 p-1 text-neutral-500',
       className,
     )}
     {...props}