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>
This commit is contained in:
2026-08-15 22:59:02 +09:00
parent 8a3ee0a1d7
commit 7d835372fb
@@ -185,18 +185,22 @@ function handleSearch() {
<style scoped> <style scoped>
.filters { .filters {
display: flex; display: flex;
gap: 1rem; gap: var(--kbx-spacing-md, 1rem);
margin-bottom: 1rem; margin-bottom: var(--kbx-spacing-md, 1rem);
} }
.search-input, .search-input,
.status-select { .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: 1px solid var(--color-border-primary);
border-radius: 4px; border-radius: var(--kbx-border-radius-sm, 4px);
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
color: var(--color-text-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 { .search-input {
@@ -222,9 +226,11 @@ function handleSearch() {
.grid-container { .grid-container {
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
border-radius: 4px; border-radius: var(--kbx-border-radius-sm, 4px);
overflow: hidden; overflow: hidden;
height: 600px; height: calc(100vh - 400px);
max-height: 600px;
min-height: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }