style: Hide labels of tabs on smaller screens

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

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}