From a11785eae4e7a351a5e8f4ddf335812ae27010f8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 21 Jan 2026 22:02:40 +0000
Subject: [PATCH] refactor: use horizontal layout for theme selector

Aligned theme selector with other settings by using horizontal layout:
- Label and description on left, Select on right
- Added gap-4 for consistent spacing
- Changed label from text-sm to text-base font-medium
- Added helpful description: 'Choose your color scheme'
- Added id='theme' for accessibility

Now all settings follow the same visual pattern.
---
 src/components/SettingsViewer.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/SettingsViewer.tsx b/src/components/SettingsViewer.tsx
index 5dec210..abcac34 100644
--- a/src/components/SettingsViewer.tsx
+++ b/src/components/SettingsViewer.tsx
@@ -41,10 +41,20 @@ export function SettingsViewer() {
             </div>
 
             <div className="space-y-6">
-              <div className="space-y-3">
-                <label className="text-sm font-medium">Theme</label>
+              <div className="flex items-center justify-between gap-4">
+                <div className="space-y-0.5">
+                  <label
+                    htmlFor="theme"
+                    className="text-base font-medium cursor-pointer"
+                  >
+                    Theme
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Choose your color scheme
+                  </p>
+                </div>
                 <Select value={themeId} onValueChange={setTheme}>
-                  <SelectTrigger className="w-48">
+                  <SelectTrigger id="theme" className="w-48">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>