From 7c9b38b1eb8165f0f06ce2f5a813f882169f3c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LAGACHE?= <theo.lagache@soluce-technologies.com>
Date: Tue, 23 Jun 2026 13:46:18 +0200
Subject: [PATCH] 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  | 2 +-
 src/features/settings/dicebear-style-picker.tsx | 2 +-
 src/features/settings/settings-tabs.tsx         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/settings/avatar-mode-selector.tsx b/src/features/settings/avatar-mode-selector.tsx
index e879c2eb..3d7c9f1e 100644
--- a/src/features/settings/avatar-mode-selector.tsx
+++ b/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 (
diff --git a/src/features/settings/dicebear-style-picker.tsx b/src/features/settings/dicebear-style-picker.tsx
index 51851399..c9b85eb4 100644
--- a/src/features/settings/dicebear-style-picker.tsx
+++ b/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 (
diff --git a/src/features/settings/settings-tabs.tsx b/src/features/settings/settings-tabs.tsx
index cdc9a4b6..3c2f5de5 100644
--- a/src/features/settings/settings-tabs.tsx
+++ b/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'>
-                            <Icon/>
-                            {name}
+                        <TabsTrigger key={value} value={value} className='flex items-center gap-1 px-2.5 sm:px-3 flex-1 sm:flex-none'>
+                            <Icon className="size-4 shrink-0"/>
+                            <span className="hidden sm:inline">{name}</span>
                         </TabsTrigger>
                     ))}
                 </TabsList>