Skip to content

fix(#294): dashboard filter strips never wrap, remove visible Clear-all#297

Merged
BorisTyshkevich merged 2 commits into
mainfrom
fix/dashboard-filter-nowrap-294
Jul 18, 2026
Merged

fix(#294): dashboard filter strips never wrap, remove visible Clear-all#297
BorisTyshkevich merged 2 commits into
mainfrom
fix/dashboard-filter-nowrap-294

Conversation

@BorisTyshkevich

Copy link
Copy Markdown
Collaborator

What & why

Closes #294. PR #293 (Dashboard v1 phases 1-4) shipped a visible Clear all
filter control and an "N active" status that wrapped onto extra toolbar rows
once several {name:Type} filters were present at desktop widths, growing the
toolbar and shrinking the dashboard's data area. This reverses that specific
UX decision (owner call, per #294): filters now behave like editor tabs and
the existing Workbench variable strip — one stable row, horizontal scroll for
overflow, at every viewport width (not just the ≤768px breakpoint from
#248) — with no visible Clear-all control.

Changes

  • src/ui/filter-bar.ts: deleted filterClearAllButton (no remaining UI
    consumer). filterActiveCount (the "N active" status) is unchanged.
  • src/ui/dashboard.ts: filter host is now .dash-filter-host >
    (.filter-strip-scroll wrapping the shared buildFilterBar output, +
    .dash-filter-count-host as a fixed sibling). No more clearAllNode.
    DashboardViewerSession.clearAllFilters() is untouched — it stays a tested
    application-level operation with no UI trigger.
  • src/styles.css:
    • .dash-toolbar is flex-wrap: nowrap at every width (was wrap-capable
      on desktop, nowrap only under the mobile media query).
    • New .filter-strip-scroll viewport (nowrap/overflow-x:auto/hidden
      scrollbar) holds the fields; .filter-strip-scroll .dash-filters is
      scoped to nowrap (not the base .dash-filters class, which the detached
      Data view's filter row also uses and still wraps there — commented in
      place).
    • The "hide native scrollbar, auto horizontal scroll" contract is now one
      shared rule read by both the Workbench .var-strip and the new
      .filter-strip-scroll, instead of two copy-pasted blocks (review
      follow-up — the issue explicitly asked for a shared utility here).
    • Two fixes that came out of an independent multi-angle review pass before
      this PR: the scroll viewport now carries enough vertical padding that a
      focused field's box-shadow focus ring isn't clipped by its
      overflow-y: hidden, and the "N active" count is align-self: center so
      it stays vertically centered against the field row even when a field
      (e.g. relative-time's resolved-value preview line) is taller than one
      line — both are covered by new real-browser regression assertions
      (verified to fail without the fix, pass with it).
  • Tests: updated tests/unit/dashboard.test.ts (no more Clear-all
    assertions; new coverage for the separate scroll/count DOM regions and for
    "no Clear-all at any active count"). Extended
    tests/e2e/dashboard-mobile.spec.js with a desktop-width test (one row,
    toolbar height stable, count/layout-switcher fixed and aligned, no
    Clear-all, no page overflow, focus-ring padding) and a taller relative-time
    fixture field. New tests/e2e/workbench-var-strip.{html,spec.js} pins the
    Workbench .var-strip's pre-existing never-wrap/scroll contract in a real
    browser (it was already correct — CSS wrapping/overflow is invisible to the
    happy-dom unit suite, so this generalizes the acceptance requirement to a
    real-browser check for both surfaces).
  • CHANGELOG.md [Unreleased] and roadmap Roadmap to 1.0.0 #68's Dashboard v1 phase 4 (#280): DashboardViewerSession + normative flow@1 layout #286 bullet updated to
    record the reversal.

Out-of-scope findings filed separately (not fixed here)

Both predate this issue, surfaced by an independent review pass:

Checklist

  • npm test passes (135 files / 3361 tests; per-file coverage gate holds)
  • Tests added/updated in the same change as the code
  • npm run build succeeds (single-file dist/sql.html)
  • Layers kept honest: pure logic in src/core/, network in src/net/ (injected fetch), DOM in src/ui/
  • No new runtime dependency
  • README / CHANGELOG.md ([Unreleased]) updated
  • Reconciled affected tracked work (roadmap Roadmap to 1.0.0 #68's Dashboard v1 phase 4 (#280): DashboardViewerSession + normative flow@1 layout #286 bullet, this issue's acceptance criteria)
  • npm run test:e2e (chromium + webkit, 86 specs) passes
  • /code-review (high effort, 8-angle fan-out + verification) run; findings applied

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01GLMprUnwnz4oaz3cnLRKcz

BorisTyshkevich and others added 2 commits July 18, 2026 09:29
Reverses the visible Clear-all UX decision from #286/#293: the toolbar and
filter field region now stay flex-wrap:nowrap at every viewport width (not
just the ≤768px mobile breakpoint), with the field region scrolling
horizontally in a dedicated `.filter-strip-scroll` viewport and the fixed
"N active" count as a non-scrolling sibling. The visible Clear-all button
is deleted; DashboardViewerSession.clearAllFilters() stays a tested
application-level operation with no UI trigger.

Also, per multi-angle review: factors the shared scroll-viewport CSS
contract between the Workbench var-strip and the new Dashboard filter
strip (previously copy-pasted), fixes a focus-ring clipping regression on
the new scroll viewport, and keeps the "N active" count vertically
centered against a filter row taller than one line.

New Playwright coverage for both surfaces (dashboard-mobile.spec.js,
workbench-var-strip.spec.js) since CSS wrap/overflow is invisible to the
happy-dom unit suite.

Closes #294

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GLMprUnwnz4oaz3cnLRKcz
…d required filters

Same-PR owner follow-up on the just-shipped filter nowrap/Clear-all-removal
change:

- The "N active" count (`filterActiveCount`, `.dash-filter-count`/
  `.dash-filter-count-host`) is deleted outright, same as Clear-all —
  DashboardViewerSession.activeFilterCount stays tested app-level state with
  no display. `.dash-filter-host` collapses back to a single-level scroll
  viewport (no more `.filter-strip-scroll` wrapper) now that there's no
  count sibling to keep outside it. The toolbar is hidden whenever there are
  no filters at every width (was mobile-only), since it now holds nothing
  else.
- The flow preset switcher moves off the filter toolbar and into the header's
  top row (right after the tile-count chip), as a compact
  `<select class="result-panel-select">` matching the Workbench's
  panel-type-picker convention, replacing the four-button `.dash-seg`
  segmented control.
- Required vs optional `{name:Type}` filter names (shared by the Workbench
  var-strip and the Dashboard filter bar) are now bold instead of a leading
  "*" glyph.

Also, from a CSS-orphan audit prompted by this change: removes `.dash-skip`
(dead since #286 flipped Dashboard membership onto `dashboard.tiles[]` — no
"N not shown" concept remains) from styles.css and the e2e fixture. A second
dead class, `.dash-grid.is-wide`, turned out to guard a real, still-intended
"Full width" preset behavior #286's flow@1 rewrite never re-wired — filed as
#298 rather than fixed here (distinct rendering bug, needs its own
>1560px-viewport regression test).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GLMprUnwnz4oaz3cnLRKcz
@BorisTyshkevich
BorisTyshkevich merged commit c6daaf0 into main Jul 18, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Remove Dashboard “Clear all” control and make filter strips horizontally scroll instead of wrapping

1 participant