From 1d57eacfa4791a7eed41ffc65aca234dd8498b2e Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 29 Mar 2026 01:05:40 +0100
Subject: [PATCH] fix: wrap language buttons in settings to prevent overflow

---
 client/src/pages/SettingsPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/SettingsPage.tsx b/client/src/pages/SettingsPage.tsx
index 6a1fd87..11de6b7 100644
--- a/client/src/pages/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage.tsx
@@ -265,7 +265,7 @@ export default function SettingsPage(): React.ReactElement {
             {/* Sprache */}
             <div>
               <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: 'en', label: 'English' },
@@ -282,9 +282,9 @@ export default function SettingsPage(): React.ReactElement {
                       catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
                     }}
                     style={{
-                      display: 'flex', alignItems: 'center', gap: 8,
-                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      display: 'flex', alignItems: 'center', gap: 6,
+                      padding: '8px 14px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                       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)',
                       color: 'var(--text-primary)',