admtracksteel/BrainWind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make settings theme and project buttons responsive on mobile

Browse Source
This commit is contained in:
Marcos
2026-07-10 14:17:30 +00:00
parent 5c0688d807
commit 85269bd99e
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/pages/SettingsModule.tsx
+12 -12
View File
@@ -82,15 +82,15 @@ const SettingsModule: React.FC = () => {
<CardDescription>{t('settings_appearance_desc')}</CardDescription> <CardDescription>{t('settings_appearance_desc')}</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex gap-2"> <div className="grid grid-cols-3 gap-1 sm:gap-2 w-full sm:w-fit sm:flex">
<Button variant={theme === 'light' ? 'default' : 'outline'} onClick={() => setTheme('light')}> <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-4 h-4 mr-2" /> {t('settings_theme_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>
<Button variant={theme === 'dark' ? 'default' : 'outline'} onClick={() => setTheme('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-4 h-4 mr-2" /> {t('settings_theme_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>
<Button variant={theme === 'system' ? 'default' : 'outline'} onClick={() => setTheme('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-4 h-4 mr-2" /> {t('settings_theme_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> </Button>
</div> </div>
<p className="text-xs text-muted-foreground mt-3"> <p className="text-xs text-muted-foreground mt-3">
@@ -109,9 +109,9 @@ const SettingsModule: React.FC = () => {
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t('settings_projects_count', { count: projects.length })} {t('settings_projects_count', { count: projects.length })}
</p> </p>
<div className="flex gap-2"> <div className="grid grid-cols-2 gap-1.5 w-full sm:w-auto sm:flex">
<Button size="sm" variant="outline" onClick={handleImportClick} disabled={importing}> <Button size="sm" variant="outline" className="text-xs px-2 h-8 flex-1 sm:flex-none" onClick={handleImportClick} disabled={importing}>
<Upload className="w-4 h-4 mr-2" /> {importing ? t('settings_importing') : t('export_import')} <Upload className="w-3.5 h-3.5 mr-1.5 shrink-0" /> {importing ? t('settings_importing') : t('export_import')}
</Button> </Button>
<input <input
ref={fileInputRef} ref={fileInputRef}
@@ -120,8 +120,8 @@ const SettingsModule: React.FC = () => {
onChange={handleFileSelected} onChange={handleFileSelected}
className="hidden" className="hidden"
/> />
<Button size="sm" variant="outline" onClick={exportSnapshot}> <Button size="sm" variant="outline" className="text-xs px-2 h-8 flex-1 sm:flex-none" onClick={exportSnapshot}>
<Save className="w-4 h-4 mr-2" /> {t('export_snapshot')} <Save className="w-3.5 h-3.5 mr-1.5 shrink-0" /> {t('export_snapshot')}
</Button> </Button>
</div> </div>
</div> </div>