From 20e9ba16756bc4291501a5f2b78d5da027920bb9 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:49:55 +0100
Subject: [PATCH] style: inline default view mode label and buttons

- Put label and icon buttons on same line
- Remove background container from view mode buttons
- Add setting-inline and setting-buttons classes
- Clean, minimal inline layout without background styling
---
 src/components/Settings.tsx |  4 ++--
 src/index.css               | 21 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 01b73253..fbee8cde 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -49,9 +49,9 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
             </label>
           </div>
 
-          <div className="setting-group">
+          <div className="setting-group setting-inline">
             <label>Default View Mode</label>
-            <div className="view-mode-controls">
+            <div className="setting-buttons">
               <IconButton
                 icon={faList}
                 onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
diff --git a/src/index.css b/src/index.css
index 609a8e7e..714eb906 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1459,6 +1459,16 @@ body {
   text-align: left;
 }
 
+.setting-group.setting-inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.setting-group.setting-inline label {
+  margin-bottom: 0;
+}
+
 .setting-group label {
   display: block;
   margin-bottom: 0.5rem;
@@ -1467,6 +1477,12 @@ body {
   text-align: left;
 }
 
+.setting-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .setting-select {
   width: 100%;
   padding: 0.5rem;
@@ -1504,11 +1520,6 @@ body {
   text-align: left;
 }
 
-.settings-view .view-mode-controls {
-  justify-content: flex-start;
-  margin-bottom: 0;
-}
-
 .settings-footer {
   display: flex;
   justify-content: flex-start;