mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 13:21:46 +00:00
fix: wrap language buttons in settings to prevent overflow
This commit is contained in:
@@ -265,7 +265,7 @@ export default function SettingsPage(): React.ReactElement {
|
|||||||
{/* Sprache */}
|
{/* Sprache */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
|
||||||
<div className="flex gap-3">
|
<div className="flex flex-wrap gap-2">
|
||||||
{[
|
{[
|
||||||
{ value: 'de', label: 'Deutsch' },
|
{ value: 'de', label: 'Deutsch' },
|
||||||
{ value: 'en', label: 'English' },
|
{ value: 'en', label: 'English' },
|
||||||
@@ -282,9 +282,9 @@ export default function SettingsPage(): React.ReactElement {
|
|||||||
catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
|
catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
display: 'flex', alignItems: 'center', gap: 8,
|
display: 'flex', alignItems: 'center', gap: 6,
|
||||||
padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
|
padding: '8px 14px', borderRadius: 10, cursor: 'pointer',
|
||||||
fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
|
fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
|
||||||
border: settings.language === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
|
border: settings.language === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
|
||||||
background: settings.language === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
|
background: settings.language === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
|
||||||
color: 'var(--text-primary)',
|
color: 'var(--text-primary)',
|
||||||
|
|||||||
Reference in New Issue
Block a user