From 7d835372fbece209f436b2f38af10ff142adf4d0 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 22:59:02 +0900
Subject: [PATCH] style(fe): apply KBX design token standardization to
 ModelsList

- Filter inputs: Use KBX tokens for height, padding, font-size, border-radius
- Grid container: Dynamic height (calc 100vh-400px) with min/max constraints
- Consistent spacing with KBX spacing tokens
- Box-sizing: border-box for consistent sizing
- Prevents grid overflow beyond viewport

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../src/features/models/pages/ModelsList.vue  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue
index c5f3351e..dca85f3b 100644
--- a/frontend/src/features/models/pages/ModelsList.vue
+++ b/frontend/src/features/models/pages/ModelsList.vue
@@ -185,18 +185,22 @@ function handleSearch() {
 <style scoped>
 .filters {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: var(--kbx-spacing-md, 1rem);
+  margin-bottom: var(--kbx-spacing-md, 1rem);
 }
 
 .search-input,
 .status-select {
-  padding: 0.5rem;
+  height: var(--kbx-input-height, 34px);
+  padding: var(--kbx-input-padding-y, 0.5rem) var(--kbx-input-padding-x, 0.75rem);
   border: 1px solid var(--color-border-primary);
-  border-radius: 4px;
+  border-radius: var(--kbx-border-radius-sm, 4px);
   background-color: var(--color-background-primary);
   color: var(--color-text-primary);
-  font-size: 0.875rem;
+  font-size: var(--kbx-font-size-input, 0.875rem);
+  font-family: var(--kbx-font-family-base, inherit);
+  line-height: 1.4;
+  box-sizing: border-box;
 }
 
 .search-input {
@@ -222,9 +226,11 @@ function handleSearch() {
 
 .grid-container {
   border: 1px solid var(--color-border-primary);
-  border-radius: 4px;
+  border-radius: var(--kbx-border-radius-sm, 4px);
   overflow: hidden;
-  height: 600px;
+  height: calc(100vh - 400px);
+  max-height: 600px;
+  min-height: 300px;
   display: flex;
   flex-direction: column;
 }