# 071 — Filter bar's syntax button/popup is ugly and incoherent ## Summary Wishlist feedback, verbatim: "UI filter ugly syntax. The button moved to the right, away from the existing button cluster. The popup is a incoherent mess and should be clearer." Two distinct complaints bundled together: 1. Layout regression — some button (the filter-help/syntax button, presumably introduced or moved by ticket 065's filter-bar help rewrite) now sits away from the rest of the filter bar's button cluster in `FilterBar.tsx` (`webapp/src/components/FilterBar.tsx`, currently 67 lines), instead of grouped with the others. 2. Content/clarity — whatever popup that button opens (the filter syntax help introduced/reworked in ticket 065, "filter-bar-help-should-describe-filter-syntax-not-regex") reads as an incoherent mess rather than a clear reference. ## Scope - Reproduce in the running app: open the filter bar, locate the syntax/help button, and confirm which button has drifted from the cluster and what "incoherent" means concretely (wall of text? disorganized sections? unclear examples?) — the wishlist entry doesn't specify, so this needs eyes-on before a fix. - Fix the button's position so it's grouped with the filter bar's other controls again. - Rework the popup's content/layout for clarity — likely restructuring into clearly separated sections (e.g. by filter feature: regex match, metric comparison, datetime, sort) with short examples per section, rather than a single undifferentiated block. - Out of scope: changing the underlying filter grammar itself (`filter_parser.pest`/`filter_parser.rs`) — this is presentation only. ## Acceptance criteria - The filter syntax button sits back with the filter bar's other buttons, not isolated to one side. - The help popup reads as a structured, scannable reference rather than a single dense block — verified visually in the running app (`make dev`), not just by inspecting JSX. ## Depends on None. Touches the same area as ticket 065 and ticket 066 ("filter-bar-value-doesnt-reflect-active-preset-or-sort") — check those haven't already reshuffled this layout before starting.