From c7b4676edcd69c2d31437a3709400c5572ea7b26 Mon Sep 17 00:00:00 2001
From: Kevin Deng <sxzz@sxzz.moe>
Date: Thu, 20 Aug 2026 04:41:37 +0900
Subject: [PATCH] Align filter controls and standardize compact control heights
 (#13)

---
 app/components/FilterBar.vue   | 32 +++++++++++++++++---------------
 app/components/PatternChip.vue |  2 +-
 app/components/SegChoice.vue   |  4 ++--
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index cb0fbb0..7d6584f 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -86,8 +86,8 @@ function toggleRegion(region: string) {
 <template>
   <div class="flex flex-col gap-3 text-sm">
     <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
-      <label class="flex items-center gap-2">
-        <span class="eyebrow">{{ t('filter.dimension') }}</span>
+      <label class="flex items-center gap-3">
+        <span class="w-20 shrink-0 eyebrow">{{ t('filter.dimension') }}</span>
         <SegChoice v-model="chars.dimension.value" :options="dimensions" />
       </label>
 
@@ -104,8 +104,8 @@ function toggleRegion(region: string) {
     </div>
 
     <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
-      <label class="flex items-center gap-2">
-        <span class="eyebrow">{{ t('filter.search') }}</span>
+      <label class="flex items-center gap-3">
+        <span class="w-20 shrink-0 eyebrow">{{ t('filter.search') }}</span>
         <input
           v-model="chars.query.value"
           type="search"
@@ -171,7 +171,7 @@ function toggleRegion(region: string) {
         v-for="option in tierOptions"
         :key="option.id"
         type="button"
-        class="flex items-center gap-1.5 border rounded-md px-2 py-1 text-xs transition-colors duration-150 focus-ring"
+        class="h-7 flex items-center gap-1.5 border rounded-md px-2 text-xs transition-colors duration-150 focus-ring"
         :class="
           chars.tiers.value.includes(option.id)
             ? 'border-$c-ink bg-$c-ink text-$c-paper'
@@ -197,17 +197,19 @@ function toggleRegion(region: string) {
       <div
         v-for="group in varieties"
         :key="group.variety"
-        class="flex flex-wrap items-center gap-1.5"
+        class="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-x-3"
       >
-        <span class="w-20 shrink-0 eyebrow">{{ group.label }}</span>
-        <PatternChip
-          v-for="signature in group.patterns"
-          :key="signature"
-          :signature="signature"
-          :count="chars.counts.value[signature] ?? 0"
-          :active="chars.patterns.value.includes(signature)"
-          @toggle="chars.togglePattern(signature)"
-        />
+        <span class="h-7 flex items-center eyebrow">{{ group.label }}</span>
+        <div class="flex flex-wrap items-center gap-1.5">
+          <PatternChip
+            v-for="signature in group.patterns"
+            :key="signature"
+            :signature="signature"
+            :count="chars.counts.value[signature] ?? 0"
+            :active="chars.patterns.value.includes(signature)"
+            @toggle="chars.togglePattern(signature)"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/components/PatternChip.vue b/app/components/PatternChip.vue
index 6a508f3..26d3c7c 100644
--- a/app/components/PatternChip.vue
+++ b/app/components/PatternChip.vue
@@ -14,7 +14,7 @@ defineEmits<{ toggle: [] }>()
   -->
   <button
     type="button"
-    class="flex items-center gap-2 border rounded-md px-2 py-1.5 transition-colors duration-150 disabled:opacity-30 focus-ring"
+    class="h-7 flex items-center gap-2 border rounded-md px-2 transition-colors duration-150 disabled:opacity-30 focus-ring"
     :class="
       active
         ? 'border-$c-ink bg-$c-ink text-$c-paper'
diff --git a/app/components/SegChoice.vue b/app/components/SegChoice.vue
index acd8fc4..725a1f0 100644
--- a/app/components/SegChoice.vue
+++ b/app/components/SegChoice.vue
@@ -6,12 +6,12 @@ const model = defineModel<T>({ required: true })
 </script>
 
 <template>
-  <div class="inline-flex border border-rule rounded-md bg-sunk p-[2px]">
+  <div class="h-7 inline-flex border border-rule rounded-md bg-sunk p-[2px]">
     <button
       v-for="option in options"
       :key="option.value"
       type="button"
-      class="rounded px-2.5 py-1 text-xs transition-colors duration-150 focus-ring"
+      class="flex items-center rounded px-2.5 text-xs transition-colors duration-150 focus-ring"
       :class="
         model === option.value
           ? 'bg-paper text-ink shadow-[0_1px_2px_rgb(0_0_0/0.06)]'
-- 
2.51.2