From 7e912bd9d0077b450a98169d340f86686421bb7a Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Thu, 16 Apr 2026 15:57:09 -0400
Subject: [PATCH] fix config ui

---
 src/App.vue    | 120 +++++++++++++++++++++++++------------------------
 src/styles.css |  56 ++++++++++++++++-------
 2 files changed, 103 insertions(+), 73 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e80a169..c5d14c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -118,69 +118,73 @@ const {
                 <h3>Add Custom Browser</h3>
                 <p>Provide a name, executable path, and Chromium user data path.</p>
               </div>
-              <div class="config-form-grid">
-                <label class="field-group">
-                  <span>Name</span>
-                  <input v-model="createConfigForm.name" placeholder="Work Chrome" />
-                </label>
-                <label class="field-group">
-                  <span>Icon</span>
-                  <div class="icon-option-grid">
+              <div class="config-form-layout">
+                <div class="config-form-fields">
+                  <label class="field-group">
+                    <span>Name</span>
+                    <input v-model="createConfigForm.name" placeholder="Work Chrome" />
+                  </label>
+                  <label class="field-group">
+                    <span>Executable Path</span>
+                    <div class="path-input-row">
+                      <input
+                        v-model="createConfigForm.executablePath"
+                        placeholder="C:\Program Files\...\chrome.exe"
+                      />
+                      <button
+                        class="secondary-button"
+                        type="button"
+                        @click="pickExecutablePath"
+                      >
+                        Browse File
+                      </button>
+                    </div>
+                  </label>
+                  <label class="field-group">
+                    <span>User Data Path</span>
+                    <div class="path-input-row">
+                      <input
+                        v-model="createConfigForm.userDataPath"
+                        placeholder="C:\Users\...\User Data"
+                      />
+                      <button
+                        class="secondary-button"
+                        type="button"
+                        @click="pickUserDataPath"
+                      >
+                        Browse Folder
+                      </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="createConfigForm.iconKey = option.key"
+                      >
+                        <img :src="option.src" :alt="option.label" />
+                        <span>{{ option.label }}</span>
+                      </button>
+                    </div>
+                  </label>
+                  <div class="config-form-actions">
                     <button
-                      v-for="option in browserIconOptions"
-                      :key="option.key"
-                      class="icon-option-button"
-                      :class="{ active: createConfigForm.iconKey === option.key }"
+                      class="primary-button"
                       type="button"
-                      @click="createConfigForm.iconKey = option.key"
+                      :disabled="savingConfig"
+                      @click="createCustomBrowserConfig"
                     >
-                      <img :src="option.src" :alt="option.label" />
-                      <span>{{ option.label }}</span>
+                      {{ savingConfig ? "Saving..." : "Add Config" }}
                     </button>
                   </div>
-                </label>
-                <label class="field-group">
-                  <span>Executable Path</span>
-                  <div class="path-input-row">
-                    <input
-                      v-model="createConfigForm.executablePath"
-                      placeholder="C:\Program Files\...\chrome.exe"
-                    />
-                    <button
-                      class="secondary-button"
-                      type="button"
-                      @click="pickExecutablePath"
-                    >
-                      Browse File
-                    </button>
-                  </div>
-                </label>
-                <label class="field-group field-span">
-                  <span>User Data Path</span>
-                  <div class="path-input-row">
-                    <input
-                      v-model="createConfigForm.userDataPath"
-                      placeholder="C:\Users\...\User Data"
-                    />
-                    <button
-                      class="secondary-button"
-                      type="button"
-                      @click="pickUserDataPath"
-                    >
-                      Browse Folder
-                    </button>
-                  </div>
-                </label>
-              </div>
-              <div class="config-form-actions">
-                <button
-                  class="primary-button"
-                  type="button"
-                  :disabled="savingConfig"
-                  @click="createCustomBrowserConfig"
-                >
-                  {{ savingConfig ? "Saving..." : "Add Config" }}
-                </button>
+                </div>
               </div>
             </div>
 
diff --git a/src/styles.css b/src/styles.css
index c156d49..c646cf6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -321,12 +321,30 @@ button {
 }
 
 .config-form-grid {
+  display: none;
+}
+
+.config-form-layout {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  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-side {
+  align-content: start;
+  padding: 10px 12px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8));
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
 .icon-option-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -336,8 +354,9 @@ button {
 .icon-option-button {
   display: grid;
   justify-items: center;
-  gap: 6px;
-  padding: 10px 8px;
+  gap: 5px;
+  min-height: 86px;
+  padding: 9px 8px;
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.9);
@@ -350,15 +369,16 @@ button {
 }
 
 .icon-option-button img {
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   object-fit: contain;
 }
 
 .icon-option-button span {
-  font-size: 0.76rem;
+  font-size: 0.72rem;
   font-weight: 600;
   text-align: center;
+  line-height: 1.25;
 }
 
 .icon-option-button.active {
@@ -407,7 +427,7 @@ button {
 .config-form-actions {
   display: flex;
   justify-content: flex-end;
-  margin-top: 12px;
+  margin-top: 2px;
 }
 
 .primary-button,
@@ -457,6 +477,7 @@ button {
   align-items: flex-start;
   gap: 10px;
   min-width: 0;
+  flex: 1;
 }
 
 .config-icon {
@@ -469,13 +490,18 @@ button {
 
 .config-meta {
   display: grid;
-  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
   margin-top: 10px;
 }
 
 .config-meta-row {
   display: grid;
   gap: 3px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.78);
+  border: 1px solid rgba(148, 163, 184, 0.12);
 }
 
 .config-meta-row p {
@@ -880,16 +906,12 @@ button {
 }
 
 @media (max-width: 720px) {
-  .config-form-grid {
+  .config-form-layout {
     grid-template-columns: 1fr;
   }
 
-  .field-span {
-    grid-column: auto;
-  }
-
   .icon-option-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .sort-bar {
@@ -911,6 +933,10 @@ button {
     flex-direction: column;
   }
 
+  .config-meta {
+    grid-template-columns: 1fr;
+  }
+
   .profile-avatar,
   .extension-icon {
     width: 50px;