kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): standardize filter section height across all pages

Browse Source 
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>
This commit is contained in:
김재현
2026-08-15 23:04:59 +09:00
parent 9223f5d288
commit 60722576a6
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/models/pages/ModelsList.vue
+1 -1
View File
@@ -185,8 +185,8 @@ function handleSearch() {
<style scoped> <style scoped>
.filters { .filters {
display: flex; display: flex;
align-items: center;
gap: var(--kbx-spacing-md, 1rem); gap: var(--kbx-spacing-md, 1rem);
margin-bottom: var(--kbx-spacing-md, 1rem);
} }
.search-input, .search-input,
frontend/src/shared/ui/layouts/PageLayout.vue
+11 -1
View File
@@ -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__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__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__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 { 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__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; } .ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }