fix(settings): make avatar selector, dicebear picker and tab bar responsive

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/settings/avatar-mode-selector.tsx

@@ -20,7 +20,7 @@ type Props = {
 export const AvatarModeSelector = ({ value, onChange, disabled }: Props) => (
   <div className="flex flex-col gap-2">
     <Label>Avatar mode</Label>
-    <div className="grid grid-cols-3 gap-2">
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
       {MODES.map((mode) => {
         const isActive = value === mode.value;
         return (

src/features/settings/dicebear-style-picker.tsx

@@ -44,7 +44,7 @@ export const DicebearStylePicker = ({ value, onChange, disabled }: Props) => {
 
       {dicebearState.status === "success" && (
         <div className="max-h-52 overflow-y-auto scrollbar-hide">
-          <div className="grid grid-cols-5 gap-2">
+          <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
             {dicebearState.styles.map((style) => {
               const isActive = value === style;
               return (

src/features/settings/settings-tabs.tsx

@@ -79,11 +79,11 @@ export const SettingsTabs = ({settings, storageChannels, notificationChannels}:
     return (
         <div className="h-full mt-3">
             <Tabs className="h-full gap-4" value={tab} onValueChange={handleChangeTab}>
-                <TabsList>
+                <TabsList className="w-full sm:w-fit">
                     {tabs.map(({icon: Icon, name, value}) => (
-                        <TabsTrigger key={value} value={value} className='flex items-center gap-1 px-2.5 sm:px-3'>
+                        <TabsTrigger key={value} value={value} className='flex items-center gap-1 px-2.5 sm:px-3 flex-1 sm:flex-none'>
-                            <Icon/>
+                            <Icon className="size-4 shrink-0"/>
-                            {name}
+                            <span className="hidden sm:inline">{name}</span>
                         </TabsTrigger>
                     ))}
                 </TabsList>