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>
</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>