From 54ca111c7cf37c79f1ee050470647a9e3837ec69 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 23 Dec 2024 21:33:03 -0500
Subject: [PATCH] Fix FormItem structure (#2034)

---
 src/components/common/FormItem.vue            | 38 ++++++++++---------
 .../content/setting/ServerConfigPanel.vue     |  6 +--
 .../dialog/content/setting/SettingGroup.vue   |  2 +-
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index 863f6346e..2a6cfad4d 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -1,24 +1,26 @@
 <!-- A generalized form item for rendering in a form. -->
 <template>
-  <div class="form-label flex flex-grow items-center">
-    <span class="text-muted" :class="props.labelClass">
-      <slot name="name-prefix"></slot>
-      {{ props.item.name }}
-      <i
-        v-if="props.item.tooltip"
-        class="pi pi-info-circle bg-transparent"
-        v-tooltip="props.item.tooltip"
+  <div class="flex flex-row items-center gap-2">
+    <div class="form-label flex flex-grow items-center">
+      <span class="text-muted" :class="props.labelClass">
+        <slot name="name-prefix"></slot>
+        {{ props.item.name }}
+        <i
+          v-if="props.item.tooltip"
+          class="pi pi-info-circle bg-transparent"
+          v-tooltip="props.item.tooltip"
+        />
+        <slot name="name-suffix"></slot>
+      </span>
+    </div>
+    <div class="form-input flex justify-end">
+      <component
+        :is="markRaw(getFormComponent(props.item))"
+        :id="props.id"
+        v-model:modelValue="formValue"
+        v-bind="getFormAttrs(props.item)"
       />
-      <slot name="name-suffix"></slot>
-    </span>
-  </div>
-  <div class="form-input flex justify-end">
-    <component
-      :is="markRaw(getFormComponent(props.item))"
-      :id="props.id"
-      v-model:modelValue="formValue"
-      v-bind="getFormAttrs(props.item)"
-    />
+    </div>
   </div>
 </template>
 
diff --git a/src/components/dialog/content/setting/ServerConfigPanel.vue b/src/components/dialog/content/setting/ServerConfigPanel.vue
index 243835ada..a1f157c1c 100644
--- a/src/components/dialog/content/setting/ServerConfigPanel.vue
+++ b/src/components/dialog/content/setting/ServerConfigPanel.vue
@@ -51,11 +51,7 @@
     >
       <Divider v-if="i > 0" />
       <h3>{{ $t(`serverConfigCategories.${label}`, label) }}</h3>
-      <div
-        v-for="item in items"
-        :key="item.name"
-        class="flex items-center mb-4"
-      >
+      <div v-for="item in items" :key="item.name" class="mb-4">
         <FormItem
           :item="translateItem(item)"
           v-model:formValue="item.value"
diff --git a/src/components/dialog/content/setting/SettingGroup.vue b/src/components/dialog/content/setting/SettingGroup.vue
index e3a003b6e..cbaec99c1 100644
--- a/src/components/dialog/content/setting/SettingGroup.vue
+++ b/src/components/dialog/content/setting/SettingGroup.vue
@@ -9,7 +9,7 @@
     <div
       v-for="setting in group.settings"
       :key="setting.id"
-      class="setting-item flex items-center mb-4"
+      class="setting-item mb-4"
     >
       <SettingItem :setting="setting" />
     </div>