diff --git a/library/components/search/SearchFilterHeader.vue b/library/components/search/SearchFilterHeader.vue index cfe919bd1..8c701b048 100644 --- a/library/components/search/SearchFilterHeader.vue +++ b/library/components/search/SearchFilterHeader.vue @@ -174,13 +174,28 @@ function onClearAll() { emit('clear-all') } >{{ t.label }} - -
- - {{ c.label }} - - - + +
+ {{ L.selected || 'Selected' }} + + {{ L.world || 'World' }}
@@ -240,7 +255,21 @@ function onClearAll() { emit('clear-all') } .sfh__pill:hover { border-color: var(--brand); } .sfh__pill[data-active] { background-color: var(--dx-accent-weak, rgba(146, 177, 149, .18)); border-color: var(--brand); color: var(--ink); } -.sfh__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } +/* ★ FIXED HEIGHT IS THE WHOLE POINT — this row must be the same size empty or full, or everything + below it jumps on every click. min-height pins it; nowrap keeps a long selection on ONE line rather + than growing to a second (flex-wrap was the other way this row could change height). + 28px is the Driver's "a bit slimmer": tall enough for a chip and its remove button, short enough + that it reads as a status strip rather than a tray. overflow-x:auto lets a long selection scroll + sideways instead of ever adding a row. */ +.sfh__chips { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; + min-height: 28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } +/* The persistent prefix. flex:0 0 auto so it never shrinks away and the row always starts the same + way, which is what makes the strip scannable at a glance. */ +.sfh__sel-label { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: .4px; + text-transform: uppercase; color: var(--mut, #6d766e); } +/* The empty state. Muted rather than hidden: "World" is real information (nothing is filtered), and + rendering it keeps the row's content box occupied so the height cannot collapse. */ +.sfh__sel-world { flex: 0 0 auto; font-size: 0.875rem; color: var(--mut, #6d766e); } .sfh__chip { display: inline-flex; gap: 6px; align-items: center; background-color: var(--dx-accent-weak, rgba(146, 177, 149, .18)); color: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; font-size: 0.85rem;