Fix FormItem structure (#2034)

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>
 

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"

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>