fix ui

src/components/SortDropdown.vue

@@ -4,6 +4,7 @@ import { computed, onBeforeUnmount, ref } from "vue";
 type Option = {
   label: string;
   value: string;
+  iconSrc?: string | null;
 };
 
 const props = defineProps<{
@@ -63,7 +64,15 @@ onBeforeUnmount(() => {
       type="button"
       @click="toggle"
     >
+      <span class="sort-dropdown-trigger-label">
+        <img
+          v-if="options.find((option) => option.value === modelValue)?.iconSrc"
+          class="sort-dropdown-option-icon"
+          :src="options.find((option) => option.value === modelValue)?.iconSrc ?? undefined"
+          :alt="selectedLabel"
+        />
         <span>{{ selectedLabel }}</span>
+      </span>
       <span class="sort-dropdown-caret" aria-hidden="true"></span>
     </button>
     <div v-if="open" class="sort-dropdown-menu">
@@ -75,7 +84,15 @@ onBeforeUnmount(() => {
         type="button"
         @click="select(option.value)"
       >
-        {{ option.label }}
+        <span class="sort-dropdown-option-content">
+          <img
+            v-if="option.iconSrc"
+            class="sort-dropdown-option-icon"
+            :src="option.iconSrc"
+            :alt="option.label"
+          />
+          <span>{{ option.label }}</span>
+        </span>
       </button>
     </div>
   </div>

src/components/config/ConfigurationView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+import SortDropdown from "../SortDropdown.vue";
 import { browserIconOptions, browserIconSrc } from "../../utils/icons";
 import type { BrowserConfigEntry, CreateCustomBrowserConfigInput } from "../../types/browser";
 
@@ -22,6 +24,16 @@ const emit = defineEmits<{
   createConfig: [];
   deleteConfig: [configId: string];
 }>();
+
+const formExpanded = ref(false);
+
+const iconOptions = computed(() =>
+  browserIconOptions.map((option) => ({
+    label: option.label,
+    value: option.key,
+    iconSrc: option.src,
+  })),
+);
 </script>
 
 <template>
@@ -32,12 +44,21 @@ const emit = defineEmits<{
       </div>
 
       <div class="config-form-card">
-        <div class="config-form-header">
+        <div class="config-form-header collapsible">
+          <div>
             <h3>Add Custom Browser</h3>
-          <p>Provide a name, executable path, and Chromium user data path.</p>
+            <p>Add a custom executable and Chromium user data path when needed.</p>
           </div>
-        <div class="config-form-layout">
-          <div class="config-form-fields">
+          <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
@@ -46,6 +67,15 @@ const emit = defineEmits<{
                 @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">
@@ -72,24 +102,6 @@ const emit = defineEmits<{
               </button>
             </div>
           </label>
-          </div>
-          <div class="config-form-side">
-            <label class="field-group">
-              <span>Icon</span>
-              <div class="icon-option-grid">
-                <button
-                  v-for="option in browserIconOptions"
-                  :key="option.key"
-                  class="icon-option-button"
-                  :class="{ active: createConfigForm.iconKey === option.key }"
-                  type="button"
-                  @click="emit('updateIconKey', option.key)"
-                >
-                  <img :src="option.src" :alt="option.label" />
-                  <span>{{ option.label }}</span>
-                </button>
-              </div>
-            </label>
           <div class="config-form-actions">
             <button
               class="primary-button"
@@ -101,6 +113,8 @@ const emit = defineEmits<{
             </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>
 

src/styles/app.css

@@ -262,6 +262,13 @@
   font-size: 0.94rem;
 }
 
+.config-form-header.collapsible {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
 .config-form-header p,
 .config-meta-row p {
   margin: 6px 0 0;
@@ -269,19 +276,33 @@
   font-size: 0.82rem;
 }
 
-.config-form-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
-  gap: 14px;
-  margin-top: 12px;
-}
-
 .config-form-fields,
 .config-form-side {
   display: grid;
   gap: 10px;
 }
 
+.config-form-fields.compact {
+  margin-top: 12px;
+}
+
+.config-inline-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 240px;
+  gap: 12px;
+  align-items: end;
+}
+
+.config-form-collapsed-note {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.78);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
 .config-form-side {
   align-content: start;
   padding: 10px 12px;
@@ -344,6 +365,10 @@
   gap: 10px;
 }
 
+.config-toggle-button {
+  white-space: nowrap;
+}
+
 .field-group span,
 .config-label {
   color: var(--muted);
@@ -366,6 +391,15 @@
   box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
 }
 
+.field-group .sort-dropdown {
+  width: 100%;
+}
+
+.field-group .sort-dropdown-trigger {
+  width: 100%;
+  min-width: 0;
+}
+
 .config-form-actions {
   display: flex;
   justify-content: flex-end;
@@ -489,6 +523,21 @@
     background 160ms ease;
 }
 
+.sort-dropdown-trigger-label,
+.sort-dropdown-option-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.sort-dropdown-option-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
 .sort-dropdown-trigger:hover {
   border-color: rgba(100, 116, 139, 0.36);
 }
@@ -848,14 +897,10 @@
 }
 
 @media (max-width: 720px) {
-  .config-form-layout {
+  .config-inline-row {
     grid-template-columns: 1fr;
   }
 
-  .icon-option-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .sort-bar {
     justify-content: stretch;
   }