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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user