fix(labs): put the search field beside the filter rail, not in it

Inside the rail, the full-width search field wrapped on phones and left
the filter icon alone on a line above it, and the shared FilterBar grew
a class override and a second layout rule to make room. The search
field now sits next to the unchanged rail: above it on phones, where
the pills keep the usual scroll row, and in one line with it from sm
up. FilterBar and docs/ui-guidelines.md are back as they were, so the
filter-bar grammar stays the one ui-standards.md defers to.
This commit is contained in:
Marc-André Bombeck committed 2026-11-11 00:13:41 +01:00
1 parent 2c63bf7a3a
commit 04a4353e50
5 files changed
+114 -110

No files matched your search

+5 -10
View File
@@ -236,20 +236,15 @@ lists) uses the unified `<FilterBar>` rail from
`src/components/ui/filter-bar.tsx` — never a per-page row of large
labelled `<Select>`s and date inputs.
- **Grammar**: `[search] [icon] [Zeitraum] [Typ] [Quelle] [extras…]
[Zurücksetzen] … [count]`. Where search is supported (such as labs), the
search input is integrated as the leading element in the rail. Canonical
dimension order remains date range, type, source; surface-specific
dimensions append after.
- **Grammar**: `[icon] [Zeitraum] [Typ] [Quelle] [extras…]
[Zurücksetzen] … [count]`. Canonical dimension order is date range,
type, source; surface-specific dimensions append after.
- **Pill = trigger + chip**: inactive pills show only the dimension
name; active pills show `Name: Wert`, pick up the primary accent and
grow a removable ✕. No separate chip row.
- **Reset** renders only while at least one dimension is active.
- **Mobile** (< `sm`): standard pill rails scroll horizontally (hidden
scrollbar, edge-bleed); the result count wraps to its own line. When an
integrated search input is present in the rail (such as in labs), the
rail wraps (`max-sm:flex-wrap`) so search spans full width and pills
wrap underneath, avoiding horizontal scroll while typing.
- **Mobile** (< `sm`): the rail is a horizontal scroll row (hidden
scrollbar, edge-bleed); the result count wraps to its own line.
- The component is presentation-only — filter state, query keys and
fetching stay in the owning page. Use `FilterBarSelect` for enum
dimensions and `FilterBarDateRange` for the from/to pair.