From 8f52521a79ace4594851317b573c8a18f7a98c54 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 15 Aug 2026 23:00:55 +0900 Subject: [PATCH] refactor(fe): implement responsive flex-based layout for ModelsList - Grid height: height: 100% (leverages PageLayout flex) - Filter inputs: Standard 34px height (KBX compact) - Removes hardcoded calc() and max/min constraints - Automatically adjusts to viewport/container changes - No manual adjustments needed per screen size This allows the component to scale responsively within the PageLayout flex container without additional CSS. Co-Authored-By: Claude Haiku 4.5 --- frontend/src/features/models/pages/ModelsList.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue index dca85f3b..d0854405 100644 --- a/frontend/src/features/models/pages/ModelsList.vue +++ b/frontend/src/features/models/pages/ModelsList.vue @@ -191,15 +191,15 @@ function handleSearch() { .search-input, .status-select { - height: var(--kbx-input-height, 34px); - padding: var(--kbx-input-padding-y, 0.5rem) var(--kbx-input-padding-x, 0.75rem); + height: 34px; + padding: 0 0.75rem; border: 1px solid var(--color-border-primary); - border-radius: var(--kbx-border-radius-sm, 4px); + border-radius: 4px; background-color: var(--color-background-primary); color: var(--color-text-primary); - font-size: var(--kbx-font-size-input, 0.875rem); - font-family: var(--kbx-font-family-base, inherit); - line-height: 1.4; + font-size: 13px; + font-family: inherit; + line-height: 34px; box-sizing: border-box; } @@ -228,8 +228,7 @@ function handleSearch() { border: 1px solid var(--color-border-primary); border-radius: var(--kbx-border-radius-sm, 4px); overflow: hidden; - height: calc(100vh - 400px); - max-height: 600px; + height: 100%; min-height: 300px; display: flex; flex-direction: column;