fix config ui

src/App.vue

@@ -118,27 +118,12 @@ const {
                 <h3>Add Custom Browser</h3>
                 <p>Provide a name, executable path, and Chromium user data path.</p>
               </div>
-              <div class="config-form-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>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>
                   <label class="field-group">
                     <span>Executable Path</span>
                     <div class="path-input-row">
@@ -155,7 +140,7 @@ const {
                       </button>
                     </div>
                   </label>
-                <label class="field-group field-span">
+                  <label class="field-group">
                     <span>User Data Path</span>
                     <div class="path-input-row">
                       <input
@@ -172,6 +157,23 @@ const {
                     </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
                       class="primary-button"
@@ -183,6 +185,8 @@ const {
                     </button>
                   </div>
                 </div>
+              </div>
+            </div>
 
             <div v-if="configsLoading" class="empty-card">
               <p>Loading browser configs...</p>

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));
+  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
-  gap: 10px;
+  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;
+  gap: 5px;
-  padding: 10px 8px;
+  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;
+  width: 26px;
-  height: 28px;
+  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;