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

@@ -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>