feat: polish settings dialog layout and keybinding display

src/components/common/FormItem.vue

@@ -1,6 +1,6 @@
 <!-- A generalized form item for rendering in a form. -->
 <template>
-  <div class="flex flex-row items-center gap-2">
+  <div class="flex min-h-10 flex-row items-center gap-2">
     <div class="form-label flex grow items-center">
       <span
         :id="`${props.id}-label`"

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -2,12 +2,12 @@
   <span>
     <template v-for="(sequence, index) in keySequences" :key="index">
       <Tag
-        class="bg-interface-menu-keybind-surface-default text-base-foreground"
+        class="min-w-6 justify-center bg-interface-menu-keybind-surface-default text-center font-normal text-base-foreground uppercase"
         :severity="isModified ? 'info' : 'secondary'"
       >
         {{ sequence }}
       </Tag>
-      <span v-if="index < keySequences.length - 1" class="px-2">+</span>
+      <span v-if="index < keySequences.length - 1" class="px-0.5" />
     </template>
   </span>
 </template>

src/platform/settings/components/SettingDialog.vue

@@ -57,26 +57,30 @@
     </template>
 
     <template #content>
-      <template v-if="activePanel">
-        <Suspense>
-          <component :is="activePanel.component" v-bind="activePanel.props" />
-          <template #fallback>
-            <div>
-              {{ $t('g.loadingPanel', { panel: activePanel.node.label }) }}
-            </div>
-          </template>
-        </Suspense>
-      </template>
-      <template v-else-if="inSearch">
-        <SettingsPanel :setting-groups="searchResults" />
-      </template>
-      <template v-else-if="activeSettingCategory">
-        <CurrentUserMessage v-if="activeSettingCategory.label === 'Comfy'" />
-        <ColorPaletteMessage
-          v-if="activeSettingCategory.label === 'Appearance'"
-        />
-        <SettingsPanel :setting-groups="sortedGroups(activeSettingCategory)" />
-      </template>
+      <div class="w-full text-sm">
+        <template v-if="activePanel">
+          <Suspense>
+            <component :is="activePanel.component" v-bind="activePanel.props" />
+            <template #fallback>
+              <div>
+                {{ $t('g.loadingPanel', { panel: activePanel.node.label }) }}
+              </div>
+            </template>
+          </Suspense>
+        </template>
+        <template v-else-if="inSearch">
+          <SettingsPanel :setting-groups="searchResults" />
+        </template>
+        <template v-else-if="activeSettingCategory">
+          <CurrentUserMessage v-if="activeSettingCategory.label === 'Comfy'" />
+          <ColorPaletteMessage
+            v-if="activeSettingCategory.label === 'Appearance'"
+          />
+          <SettingsPanel
+            :setting-groups="sortedGroups(activeSettingCategory)"
+          />
+        </template>
+      </div>
     </template>
   </BaseModalLayout>
 </template>

src/platform/settings/components/SettingGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="setting-group">
-    <Divider v-if="divider" />
-    <h3>
+    <div v-if="divider" class="my-8 border-t border-border-default" />
+    <h3 class="text-base">
       <span v-if="group.category" class="text-muted">
         {{
           $t(
@@ -19,7 +19,7 @@
       v-for="setting in group.settings.filter((s) => !s.deprecated)"
       :key="setting.id"
       :data-setting-id="setting.id"
-      class="setting-item mb-4"
+      class="setting-item mb-2"
     >
       <SettingItem :setting="setting" />
     </div>
@@ -27,8 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import Divider from 'primevue/divider'
-
 import SettingItem from '@/platform/settings/components/SettingItem.vue'
 import type { SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'