From 5f7aab90a7363409a762561b8d1c413c65aca56f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:18:55 +0100
Subject: [PATCH] feat(settings): align color pickers and labels for better
 visual layout

---
 src/components/Settings.tsx | 36 +++++++++++++++++++++---------------
 src/index.css               | 11 +++++++++++
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 8e597413..890eeb00 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -122,27 +122,33 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
 
 
             <div className="setting-group setting-inline">
-              <label>My Highlights</label>
-              <ColorPicker
-                selectedColor={localSettings.highlightColorMine || '#ffff00'}
-                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
-              />
+              <label className="setting-label">My Highlights</label>
+              <div className="setting-control">
+                <ColorPicker
+                  selectedColor={localSettings.highlightColorMine || '#ffff00'}
+                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
+                />
+              </div>
             </div>
 
             <div className="setting-group setting-inline">
-              <label>Friends Highlights</label>
-              <ColorPicker
-                selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
-                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
-              />
+              <label className="setting-label">Friends Highlights</label>
+              <div className="setting-control">
+                <ColorPicker
+                  selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
+                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
+                />
+              </div>
             </div>
 
             <div className="setting-group setting-inline">
-              <label>Nostrverse Highlights</label>
-              <ColorPicker
-                selectedColor={localSettings.highlightColorNostrverse || '#800080'}
-                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
-              />
+              <label className="setting-label">Nostrverse Highlights</label>
+              <div className="setting-control">
+                <ColorPicker
+                  selectedColor={localSettings.highlightColorNostrverse || '#800080'}
+                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
+                />
+              </div>
             </div>
 
             <div className="setting-preview">
diff --git a/src/index.css b/src/index.css
index fa02fa37..475a8d5f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1855,6 +1855,17 @@ body {
   gap: 1rem;
 }
 
+.setting-label {
+  text-align: left;
+  flex: 1;
+}
+
+.setting-control {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .setting-group.setting-inline label {
   margin-bottom: 0;
 }