From 60722576a64d272ca5497e2621795706c3740c4f Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 23:04:59 +0900
Subject: [PATCH] style(fe): standardize filter section height across all pages

PageLayout:
- Filter section: min-height 52px (standard height)
- Display: flex with center alignment
- Consistent gap between elements

ModelsList:
- Filter container: align-items center
- Remove bottom margin (handled by PageLayout)

Ensures all pages have consistent filter bar heights
and alignment without per-page CSS adjustments.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/features/models/pages/ModelsList.vue |  2 +-
 frontend/src/shared/ui/layouts/PageLayout.vue     | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue
index 4483200f..0ebafc25 100644
--- a/frontend/src/features/models/pages/ModelsList.vue
+++ b/frontend/src/features/models/pages/ModelsList.vue
@@ -185,8 +185,8 @@ function handleSearch() {
 <style scoped>
 .filters {
   display: flex;
+  align-items: center;
   gap: var(--kbx-spacing-md, 1rem);
-  margin-bottom: var(--kbx-spacing-md, 1rem);
 }
 
 .search-input,
diff --git a/frontend/src/shared/ui/layouts/PageLayout.vue b/frontend/src/shared/ui/layouts/PageLayout.vue
index 03161f08..b3acb654 100644
--- a/frontend/src/shared/ui/layouts/PageLayout.vue
+++ b/frontend/src/shared/ui/layouts/PageLayout.vue
@@ -82,7 +82,17 @@ const showHelp = ref(false)
 .ks-page__command-bar-group { display: flex; align-items: center; gap: var(--ks-space-2); flex-wrap: wrap; }
 .ks-page__actions { display: flex; align-items: center; gap: var(--ks-space-2); flex-shrink: 0; }
 .ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); flex-shrink: 0; }
-.ks-page__filters { padding: var(--ks-space-2) var(--ks-space-3); flex-shrink: 0; background: var(--ks-color-surface); border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius-sm); }
+.ks-page__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--ks-space-3);
+  padding: var(--ks-space-2) var(--ks-space-3);
+  flex-shrink: 0;
+  min-height: 52px;
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+}
 .ks-page__workspace { min-width: 0; flex: 1; display: grid; min-height: 0; gap: var(--ks-space-4); }
 .ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
 .ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }