mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 05:42:19 +00:00
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:
1 parent
2c63bf7a3a
commit
04a4353e50
5 files changed
+114
-110
No files matched your search
+5
-10
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user