From 189d7c02f5a4e39b092e95090937cbd237c2da74 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Thu, 16 Apr 2026 21:50:32 -0400
Subject: [PATCH] fix config ui

---
 src/components/config/ConfigurationView.vue | 239 ++++++++++----------
 1 file changed, 123 insertions(+), 116 deletions(-)

diff --git a/src/components/config/ConfigurationView.vue b/src/components/config/ConfigurationView.vue
index c9d2603..c670f41 100644
--- a/src/components/config/ConfigurationView.vue
+++ b/src/components/config/ConfigurationView.vue
@@ -37,139 +37,146 @@ const iconOptions = computed(() =>
 </script>
 
 <template>
-  <section class="content-scroll-area">
-    <section class="content-section">
-      <div v-if="configError" class="inline-error">
-        {{ configError }}
-      </div>
+  <section class="config-page styled-scrollbar">
+    <div v-if="configError" class="inline-error">
+      {{ configError }}
+    </div>
 
-      <div class="config-form-card">
-        <div class="config-form-header collapsible">
-          <div>
-            <h3>Add Custom Browser</h3>
-            <p>Add a custom executable and Chromium user data path when needed.</p>
+    <div class="config-form-card">
+      <div class="config-form-header collapsible">
+        <div>
+          <h3>Add Custom Browser</h3>
+          <p>Add a custom executable and Chromium user data path when needed.</p>
+        </div>
+        <button
+          class="secondary-button config-toggle-button"
+          type="button"
+          @click="formExpanded = !formExpanded"
+        >
+          {{ formExpanded ? "Collapse" : "Expand" }}
+        </button>
+      </div>
+      <div v-if="formExpanded" class="config-form-fields compact">
+        <div class="config-inline-row">
+          <label class="field-group">
+            <span>Name</span>
+            <input
+              :value="createConfigForm.name"
+              placeholder="Work Chrome"
+              @input="emit('updateName', ($event.target as HTMLInputElement).value)"
+            />
+          </label>
+          <label class="field-group">
+            <span>Icon</span>
+            <SortDropdown
+              :model-value="createConfigForm.iconKey ?? 'chrome'"
+              :options="iconOptions"
+              @update:model-value="emit('updateIconKey', $event)"
+            />
+          </label>
+        </div>
+        <label class="field-group">
+          <span>Executable Path</span>
+          <div class="path-input-row">
+            <input
+              :value="createConfigForm.executablePath"
+              placeholder="C:\Program Files\...\chrome.exe"
+              @input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
+            />
+            <button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
+              Browse File
+            </button>
           </div>
+        </label>
+        <label class="field-group">
+          <span>User Data Path</span>
+          <div class="path-input-row">
+            <input
+              :value="createConfigForm.userDataPath"
+              placeholder="C:\Users\...\User Data"
+              @input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
+            />
+            <button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
+              Browse Folder
+            </button>
+          </div>
+        </label>
+        <div class="config-form-actions">
           <button
-            class="secondary-button config-toggle-button"
+            class="primary-button"
             type="button"
-            @click="formExpanded = !formExpanded"
+            :disabled="savingConfig"
+            @click="emit('createConfig')"
           >
-            {{ formExpanded ? "Collapse" : "Expand" }}
+            {{ savingConfig ? "Saving..." : "Add Config" }}
           </button>
         </div>
-        <div v-if="formExpanded" class="config-form-fields compact">
-          <div class="config-inline-row">
-            <label class="field-group">
-              <span>Name</span>
-              <input
-                :value="createConfigForm.name"
-                placeholder="Work Chrome"
-                @input="emit('updateName', ($event.target as HTMLInputElement).value)"
-              />
-            </label>
-            <label class="field-group">
-              <span>Icon</span>
-              <SortDropdown
-                :model-value="createConfigForm.iconKey ?? 'chrome'"
-                :options="iconOptions"
-                @update:model-value="emit('updateIconKey', $event)"
-              />
-            </label>
-          </div>
-          <label class="field-group">
-            <span>Executable Path</span>
-            <div class="path-input-row">
-              <input
-                :value="createConfigForm.executablePath"
-                placeholder="C:\Program Files\...\chrome.exe"
-                @input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
-              />
-              <button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
-                Browse File
-              </button>
-            </div>
-          </label>
-          <label class="field-group">
-            <span>User Data Path</span>
-            <div class="path-input-row">
-              <input
-                :value="createConfigForm.userDataPath"
-                placeholder="C:\Users\...\User Data"
-                @input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
-              />
-              <button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
-                Browse Folder
-              </button>
-            </div>
-          </label>
-          <div class="config-form-actions">
-            <button
-              class="primary-button"
-              type="button"
-              :disabled="savingConfig"
-              @click="emit('createConfig')"
-            >
-              {{ savingConfig ? "Saving..." : "Add Config" }}
-            </button>
-          </div>
-        </div>
-        <div v-else class="config-form-collapsed-note">
-          <span>Collapsed by default to keep this page focused on existing configs.</span>
-        </div>
       </div>
+      <div v-else class="config-form-collapsed-note">
+        <span>Collapsed by default to keep this page focused on existing configs.</span>
+      </div>
+    </div>
 
-      <div v-if="configsLoading" class="empty-card">
-        <p>Loading browser configs...</p>
-      </div>
-      <div v-else class="stack-list">
-        <article
-          v-for="config in browserConfigs"
-          :key="config.id"
-          class="config-card"
-        >
-          <div class="config-card-header">
-            <div class="config-card-lead">
-              <div class="browser-nav-icon config-icon">
-                <img
-                  v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
-                  :src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
-                  :alt="`${config.name} icon`"
-                />
-                <span v-else>{{ configMonogram(config) }}</span>
-              </div>
-              <div>
-                <div class="config-title-row">
-                  <h4>{{ config.name }}</h4>
-                </div>
+    <div v-if="configsLoading" class="empty-card">
+      <p>Loading browser configs...</p>
+    </div>
+    <div v-else class="stack-list">
+      <article
+        v-for="config in browserConfigs"
+        :key="config.id"
+        class="config-card"
+      >
+        <div class="config-card-header">
+          <div class="config-card-lead">
+            <div class="browser-nav-icon config-icon">
+              <img
+                v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
+                :src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
+                :alt="`${config.name} icon`"
+              />
+              <span v-else>{{ configMonogram(config) }}</span>
+            </div>
+            <div>
+              <div class="config-title-row">
+                <h4>{{ config.name }}</h4>
               </div>
             </div>
-            <button
-              v-if="config.deletable"
-              class="danger-button"
-              type="button"
-              :disabled="isDeletingConfig(config.id)"
-              @click="emit('deleteConfig', config.id)"
-            >
-              {{ isDeletingConfig(config.id) ? "Deleting..." : "Delete" }}
-            </button>
           </div>
-          <div class="config-meta">
-            <div class="config-meta-row">
-              <span class="config-label">Executable</span>
-              <p :title="config.executablePath">{{ config.executablePath || "Not resolved" }}</p>
-            </div>
-            <div class="config-meta-row">
-              <span class="config-label">User Data</span>
-              <p :title="config.userDataPath">{{ config.userDataPath }}</p>
-            </div>
+          <button
+            v-if="config.deletable"
+            class="danger-button"
+            type="button"
+            :disabled="isDeletingConfig(config.id)"
+            @click="emit('deleteConfig', config.id)"
+          >
+            {{ isDeletingConfig(config.id) ? "Deleting..." : "Delete" }}
+          </button>
+        </div>
+        <div class="config-meta">
+          <div class="config-meta-row">
+            <span class="config-label">Executable</span>
+            <p :title="config.executablePath">{{ config.executablePath || "Not resolved" }}</p>
           </div>
-        </article>
-      </div>
-    </section>
+          <div class="config-meta-row">
+            <span class="config-label">User Data</span>
+            <p :title="config.userDataPath">{{ config.userDataPath }}</p>
+          </div>
+        </div>
+      </article>
+    </div>
   </section>
 </template>
 
 <style scoped>
+.config-page {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 2px 0 0;
+}
+
 .config-form-card,
 .config-card {
   border-radius: 18px;