From b5bdcad7cb821ee22ec29fb730d7fc8586e591ef Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 21 Mar 2026 00:59:13 +0800
Subject: [PATCH] fix(ui): incorrect layout impl for FieldSelect

---
 packages/ui/src/components/form/combobox/combobox.vue  | 4 ++--
 packages/ui/src/components/form/field/field-select.vue | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/form/combobox/combobox.vue b/packages/ui/src/components/form/combobox/combobox.vue
index 9e63796e3..83edb8d7d 100644
--- a/packages/ui/src/components/form/combobox/combobox.vue
+++ b/packages/ui/src/components/form/combobox/combobox.vue
@@ -31,10 +31,10 @@ function toDisplayValue(value: T): string {
 </script>
 
 <template>
-  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full']">
+  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full', 'h-fit']">
     <ComboboxAnchor
       :class="[
-        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
+        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-9 gap-[5px] outline-none',
         'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
         'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
         'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
diff --git a/packages/ui/src/components/form/field/field-select.vue b/packages/ui/src/components/form/field/field-select.vue
index 753682cda..b5b6b8904 100644
--- a/packages/ui/src/components/form/field/field-select.vue
+++ b/packages/ui/src/components/form/field/field-select.vue
@@ -21,22 +21,21 @@ const modelValue = defineModel<string>({ required: false })
     <div
       :class="[
         'items-center',
-        'justify-center',
-        props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
+        props.layout === 'horizontal' ? 'grid grid-rows-2 gap-2' : 'grid grid-cols-2 gap-2',
       ]"
     >
       <div
         :class="[
           'w-full',
-          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
+          props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
         ]"
       >
-        <div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium']">
+        <div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium', 'text-left']">
           <slot name="label">
             {{ props.label }}
           </slot>
         </div>
-        <div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
+        <div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400', 'text-left']">
           <slot name="description">
             {{ props.description }}
           </slot>