From 85269bd99edcc81ee2b60c928dd8cd4255a5f0aa Mon Sep 17 00:00:00 2001
From: Marcos <m.reifonas@gmail.com>
Date: Fri, 10 Jul 2026 14:17:30 +0000
Subject: [PATCH] fix: make settings theme and project buttons responsive on
 mobile

---
 app/src/pages/SettingsModule.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/pages/SettingsModule.tsx b/app/src/pages/SettingsModule.tsx
index 52ecdaf..a001404 100644
--- a/app/src/pages/SettingsModule.tsx
+++ b/app/src/pages/SettingsModule.tsx
@@ -82,15 +82,15 @@ const SettingsModule: React.FC = () => {
           <CardDescription>{t('settings_appearance_desc')}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex gap-2">
-            <Button variant={theme === 'light' ? 'default' : 'outline'} onClick={() => setTheme('light')}>
-              <Sun className="w-4 h-4 mr-2" /> {t('settings_theme_light')}
+          <div className="grid grid-cols-3 gap-1 sm:gap-2 w-full sm:w-fit sm:flex">
+            <Button variant={theme === 'light' ? 'default' : 'outline'} className="text-xs sm:text-sm px-1 sm:px-4 h-8 sm:h-9" onClick={() => setTheme('light')}>
+              <Sun className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1 sm:mr-2 shrink-0" /> {t('settings_theme_light')}
             </Button>
-            <Button variant={theme === 'dark' ? 'default' : 'outline'} onClick={() => setTheme('dark')}>
-              <Moon className="w-4 h-4 mr-2" /> {t('settings_theme_dark')}
+            <Button variant={theme === 'dark' ? 'default' : 'outline'} className="text-xs sm:text-sm px-1 sm:px-4 h-8 sm:h-9" onClick={() => setTheme('dark')}>
+              <Moon className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1 sm:mr-2 shrink-0" /> {t('settings_theme_dark')}
             </Button>
-            <Button variant={theme === 'system' ? 'default' : 'outline'} onClick={() => setTheme('system')}>
-              <Laptop className="w-4 h-4 mr-2" /> {t('settings_theme_system')}
+            <Button variant={theme === 'system' ? 'default' : 'outline'} className="text-xs sm:text-sm px-1 sm:px-4 h-8 sm:h-9" onClick={() => setTheme('system')}>
+              <Laptop className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1 sm:mr-2 shrink-0" /> {t('settings_theme_system')}
             </Button>
           </div>
           <p className="text-xs text-muted-foreground mt-3">
@@ -109,9 +109,9 @@ const SettingsModule: React.FC = () => {
             <p className="text-sm text-muted-foreground">
               {t('settings_projects_count', { count: projects.length })}
             </p>
-            <div className="flex gap-2">
-              <Button size="sm" variant="outline" onClick={handleImportClick} disabled={importing}>
-                <Upload className="w-4 h-4 mr-2" /> {importing ? t('settings_importing') : t('export_import')}
+            <div className="grid grid-cols-2 gap-1.5 w-full sm:w-auto sm:flex">
+              <Button size="sm" variant="outline" className="text-xs px-2 h-8 flex-1 sm:flex-none" onClick={handleImportClick} disabled={importing}>
+                <Upload className="w-3.5 h-3.5 mr-1.5 shrink-0" /> {importing ? t('settings_importing') : t('export_import')}
               </Button>
               <input
                 ref={fileInputRef}
@@ -120,8 +120,8 @@ const SettingsModule: React.FC = () => {
                 onChange={handleFileSelected}
                 className="hidden"
               />
-              <Button size="sm" variant="outline" onClick={exportSnapshot}>
-                <Save className="w-4 h-4 mr-2" /> {t('export_snapshot')}
+              <Button size="sm" variant="outline" className="text-xs px-2 h-8 flex-1 sm:flex-none" onClick={exportSnapshot}>
+                <Save className="w-3.5 h-3.5 mr-1.5 shrink-0" /> {t('export_snapshot')}
               </Button>
             </div>
           </div>