Settings UI: Split horizontally 50-50%

Looks a lot cleaner now that it's uniformized

Author: vdavid

apps/desktop/src/lib/settings/CLAUDE.md

@@ -58,6 +58,24 @@ and action button styles), `SettingRow`, `SettingSwitch`, `SettingSelect`, `Sett
 `SettingRadioGroup`, `SettingToggleGroup`, `SettingsSidebar`, `SettingsContent`. Also `SectionSummary` for
 collapsed-section previews.
 
+### 50-50 split layout guideline
+
+`SettingRow` has a `split` prop that enforces a 50-50 grid layout (label left, control right). This keeps left edges of
+controls vertically aligned across rows for visual consistency. The settings window is resizable, so the split is
+percentage-based, not pixel-based.
+
+**When to use `split`:** Setting rows where the control is a select, text input, password input, slider, number input,
+radio group, or combobox — anything that benefits from consistent horizontal alignment.
+
+**When NOT to use `split`:**
+- Switches (too small; 50-50 wastes space and doesn't improve alignment)
+- Toggle groups (multi-button controls that may not fit in 50% width at narrow window sizes)
+- Full-width custom layouts (keyboard shortcuts table, license card, advanced auto-generated rows)
+
+**When adding a new setting row**, decide if it should use `split` based on the rules above. If the control is a
+dropdown, text field, slider, or similar right-aligned input, add `split` to `<SettingRow>`. Description text below each
+row intentionally spans the full width.
+
 ### Other files
 
 - **cloud-providers.ts** — Cloud provider preset definitions (OpenAI, Anthropic, Groq, etc.) and per-provider config

apps/desktop/src/lib/settings/components/SettingPasswordInput.svelte

@@ -137,6 +137,7 @@
         display: flex;
         align-items: center;
         min-width: 180px;
+        width: 100%;
         border: 1px solid var(--color-border);
         border-radius: var(--radius-sm);
         background: var(--color-bg-primary);

apps/desktop/src/lib/settings/components/SettingRow.svelte

@@ -12,6 +12,8 @@
         disabled?: boolean
         disabledReason?: string
         requiresRestart?: boolean
+        /** When true, label and control each take 50% width for consistent vertical alignment across rows. */
+        split?: boolean
         searchQuery?: string
         children: Snippet
         descriptionContent?: Snippet
@@ -24,6 +26,7 @@
         disabled = false,
         disabledReason,
         requiresRestart = false,
+        split = false,
         searchQuery = '',
         children,
         descriptionContent,
@@ -54,7 +57,7 @@
 </script>
 
 <div class="setting-row" class:disabled>
-    <div class="setting-header">
+    <div class="setting-header" class:split>
         <div class="setting-label-wrapper">
             <label class="setting-label" for={id}
                 >{#each labelSegments as segment, i (i)}{#if segment.matched}<mark class="search-highlight"
@@ -118,6 +121,13 @@
         gap: var(--spacing-md);
     }
 
+    .setting-header.split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+        gap: var(--spacing-md);
+    }
+
     .setting-label-wrapper {
         display: flex;
         align-items: center;
@@ -168,6 +178,12 @@
         flex-shrink: 0;
     }
 
+    .split .setting-control {
+        /* Let controls stretch to fill the right column */
+        min-width: 0;
+        width: 100%;
+    }
+
     .setting-description {
         margin: var(--spacing-xs) 0 0;
         color: var(--color-text-secondary);

apps/desktop/src/lib/settings/components/SettingSelect.svelte

@@ -207,6 +207,7 @@
 <style>
     .select-wrapper {
         min-width: 180px;
+        width: 100%;
     }
 
     .custom-input-wrapper {
@@ -257,7 +258,7 @@
         justify-content: space-between;
         gap: var(--spacing-sm);
         padding: var(--spacing-xs) var(--spacing-sm);
-        min-width: 180px;
+        width: 100%;
         border: 1px solid var(--color-border);
         border-radius: var(--radius-sm);
         background: var(--color-bg-primary);

apps/desktop/src/lib/settings/components/SettingSlider.svelte

@@ -115,7 +115,8 @@
         display: flex;
         align-items: center;
         gap: var(--spacing-sm);
-        min-width: 280px;
+        min-width: 0;
+        width: 100%;
     }
 
     /* The root needs explicit sizing for Ark UI slider to work */

apps/desktop/src/lib/settings/sections/AiSection.svelte

@@ -433,6 +433,7 @@
         try {
             await startAiDownload()
         } catch (e) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- set by handleCancelDownload() during the await
             if (downloadCancelledByUser) {
                 logger.info('AI download cancelled by user')
             } else {
@@ -716,6 +717,7 @@
                     id="ai.cloudProvider"
                     label="Service"
                     description="Which cloud AI service to use."
+                    split
                     {searchQuery}
                 >
                     <select
@@ -741,6 +743,7 @@
                 id="ai.cloudProviderConfigs"
                 label="Endpoint"
                 description="API endpoint URL for the selected service."
+                split
                 {searchQuery}
             >
                 {#if showEditableBaseUrl}
@@ -775,6 +778,7 @@
                     id="ai.cloudProviderConfigs"
                     label="API key"
                     description="Your API key for this service."
+                    split
                     {searchQuery}
                 >
                     <SettingPasswordInput
@@ -794,6 +798,7 @@
                 id="ai.cloudProviderConfigs"
                 label="Model"
                 description="The model name to use for completions."
+                split
                 {searchQuery}
             >
                 {#if availableModels.length > 0}
@@ -980,6 +985,7 @@
                     id="ai.localContextSize"
                     label="Context window"
                     description="Number of tokens the local model can process at once. Larger values use more memory."
+                    split
                     {searchQuery}
                 >
                     <div class="context-size-controls">
@@ -1200,7 +1206,7 @@
 
     /* Cloud provider select */
     .cloud-provider-select {
-        min-width: 180px;
+        width: 100%;
         padding: var(--spacing-sm) var(--spacing-md);
         border: 1px solid var(--color-border);
         border-radius: var(--radius-sm);
@@ -1227,7 +1233,7 @@
 
     /* Text input (same style as other setting inputs) */
     .text-input {
-        min-width: 180px;
+        width: 100%;
         padding: var(--spacing-sm) var(--spacing-md);
         border: 1px solid var(--color-border);
         border-radius: var(--radius-sm);
@@ -1491,11 +1497,12 @@
     /* Model combobox */
     .combobox-wrapper {
         position: relative;
+        width: 100%;
     }
 
     .combobox-input-wrapper {
         position: relative;
-        display: inline-flex;
+        display: flex;
         align-items: center;
     }
 

apps/desktop/src/lib/settings/sections/AppearanceSection.svelte

@@ -64,7 +64,7 @@
 
 <SettingsSection title="Appearance">
     {#if shouldShow('appearance.appColor')}
-        <SettingRow id="appearance.appColor" label={appColorDef.label} description="" {searchQuery}>
+        <SettingRow id="appearance.appColor" label={appColorDef.label} description="" split {searchQuery}>
             {#snippet descriptionContent()}
                 To change your system theme color, go to
                 <button type="button" class="appearance-link" onclick={() => void openAppearanceSettings()}
@@ -131,6 +131,7 @@
             id="appearance.fileSizeFormat"
             label={fileSizeDef.label}
             description={fileSizeDef.description}
+            split
             {searchQuery}
         >
             <SettingSelect id="appearance.fileSizeFormat" />
@@ -142,6 +143,7 @@
             id="appearance.dateTimeFormat"
             label={dateTimeDef.label}
             description={dateTimeDef.description}
+            split
             {searchQuery}
         >
             <div class="date-time-setting">
@@ -265,8 +267,9 @@
     }
 
     .date-time-setting {
-        /* Fixed width to prevent layout shift when custom content appears */
-        width: 250px;
+        /* Fill the split column; min-width prevents collapse */
+        width: 100%;
+        min-width: 200px;
     }
 
     .custom-format {

apps/desktop/src/lib/settings/sections/DriveIndexingSection.svelte

@@ -78,30 +78,28 @@
     {/if}
 
     <div class="index-info">
-        <div class="info-row">
+        <div class="index-row">
             <span class="info-label">Index size</span>
-            <span class="info-value">
-                {#if dbFileSize != null}
-                    {formatFileSize(dbFileSize)}
-                {:else}
-                    No index
-                {/if}
-            </span>
+            <div class="index-controls">
+                <Button
+                    variant="secondary"
+                    size="mini"
+                    onclick={handleClearIndex}
+                    disabled={clearing || dbFileSize == null}
+                >
+                    {clearing ? 'Clearing...' : 'Clear index'}
+                </Button>
+                <span class="info-value">
+                    {#if dbFileSize != null}
+                        {formatFileSize(dbFileSize)}
+                    {:else}
+                        No index
+                    {/if}
+                </span>
+            </div>
         </div>
 
-        <div class="clear-action">
-            <Button
-                variant="secondary"
-                size="mini"
-                onclick={handleClearIndex}
-                disabled={clearing || dbFileSize == null}
-            >
-                {clearing ? 'Clearing...' : 'Clear index'}
-            </Button>
-            <span class="clear-description">
-                Deletes the index database. A fresh scan starts next time indexing is enabled.
-            </span>
-        </div>
+        <p class="clear-description">Deletes the index database. A fresh scan starts next time indexing is enabled.</p>
 
         {#if clearError}
             <div class="clear-error">{clearError}</div>
@@ -112,36 +110,39 @@
 <style>
     .index-info {
         padding: var(--spacing-sm) 0;
+        border-bottom: 1px solid var(--color-border-subtle);
     }
 
-    .info-row {
-        display: flex;
+    .index-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         align-items: center;
-        justify-content: space-between;
-        padding: var(--spacing-xs) 0;
+        gap: var(--spacing-md);
     }
 
     .info-label {
         font-weight: 500;
         color: var(--color-text-primary);
     }
 
+    .index-controls {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-sm);
+    }
+
     .info-value {
         color: var(--color-text-secondary);
         font-family: var(--font-mono);
         font-size: var(--font-size-sm);
     }
 
-    .clear-action {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-sm);
-        margin-top: var(--spacing-sm);
-    }
-
     .clear-description {
-        color: var(--color-text-tertiary);
+        margin: var(--spacing-xs) 0 0;
+        color: var(--color-text-secondary);
         font-size: var(--font-size-sm);
+        line-height: 1.4;
     }
 
     .clear-error {

apps/desktop/src/lib/settings/sections/FileOperationsSection.svelte

@@ -27,6 +27,7 @@
             id="fileOperations.allowFileExtensionChanges"
             label={extensionChangesDef.label}
             description={extensionChangesDef.description}
+            split
             {searchQuery}
         >
             <SettingRadioGroup id="fileOperations.allowFileExtensionChanges" />
@@ -38,6 +39,7 @@
             id="fileOperations.progressUpdateInterval"
             label={progressIntervalDef.label}
             description={progressIntervalDef.description}
+            split
             {searchQuery}
         >
             <SettingSlider id="fileOperations.progressUpdateInterval" unit="ms" />
@@ -49,6 +51,7 @@
             id="fileOperations.maxConflictsToShow"
             label={maxConflictsDef.label}
             description={maxConflictsDef.description}
+            split
             {searchQuery}
         >
             <SettingSelect id="fileOperations.maxConflictsToShow" />

apps/desktop/src/lib/settings/sections/McpServerSection.svelte

@@ -72,6 +72,7 @@
             description={mcpPortDef.description}
             disabled={!mcpEnabled}
             requiresRestart={mcpPortDef.requiresRestart}
+            split
             {searchQuery}
         >
             <div class="port-setting">