From b27793f99a684fc419f0ffd2781c5be75a6f602f Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Mon, 29 Jun 2026 12:40:42 +0200
Subject: [PATCH] fix(appearance): shorten the Auto color-mode label to 'Auto'
 on mobile

---
 client/src/components/Settings/AppearanceSettingsTab.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Settings/AppearanceSettingsTab.tsx b/client/src/components/Settings/AppearanceSettingsTab.tsx
index b595a52a..9c9b1e3f 100644
--- a/client/src/components/Settings/AppearanceSettingsTab.tsx
+++ b/client/src/components/Settings/AppearanceSettingsTab.tsx
@@ -155,7 +155,12 @@ export default function AppearanceSettingsTab(): React.ReactElement {
               return (
                 <button key={opt.value} onClick={() => setMode(opt.value)} style={segStyle(active)}>
                   <span className="hidden sm:inline-flex"><opt.icon size={16} /></span>
-                  {opt.label}
+                  {opt.value === 'auto' ? (
+                    <>
+                      <span className="hidden sm:inline">{opt.label}</span>
+                      <span className="sm:hidden">Auto</span>
+                    </>
+                  ) : opt.label}
                 </button>
               )
             })}