PowerSearch: improve the mobile edit-popover experience (bottom sheet / responsive overlay; coordinate with responsive + Sheet work)
@cixzhang is already working on this.
Since Sep 2, 2026.
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
Summary
PowerSearch's edit popover experience on mobile needs improvement. Today the filter-edit UI (field/operator/value editor) renders in a usePopover-anchored layer positioned next to the tokenizer — a pattern designed for desktop. On small/touch viewports an anchored popover is cramped and awkward; the experience should be rethought, likely as a bottom sheet (or another mobile-appropriate surface) rather than a shrunk desktop popover.
Current state
PowerSearch uses usePopover (PowerSearchEditPopover) anchored to the tokenizer for filter editing. There is no responsive/mobile branch — the same anchored layer is used at all viewport sizes.
Direction (to design)
- On mobile/touch/below a breakpoint, present the filter editor as a bottom sheet (or full-width sheet) instead of an anchored popover — more room, better touch targets, standard mobile pattern.
- This depends on a Sheet/Drawer primitive (see the Sheet RFC #3675 / #575, and DJ's lab
Drawer) — PowerSearch should compose that rather than build a bespoke mobile surface. - Reconsider the whole small-viewport interaction (how tokens, the add-filter flow, and value editing behave on mobile), not just swapping the container.
Coordinate with the broader responsive effort
This shouldn't be solved PowerSearch-only. It should be folded into the mobile/responsive workstream — there's no dedicated responsive tracker yet; the closest umbrella is the Platform-aware RFC #3912, and the Sheet/Drawer work (#3675 / #575). Decide whether this lands as part of a shared responsive-overlay pattern (so Selector/DropdownMenu/etc. get the same popover→sheet treatment on mobile) rather than a one-off.
Considerations
- Reuse a system responsive-overlay mechanism if one emerges (popover on desktop → bottom sheet on mobile) rather than a PowerSearch-specific hack — API/pattern reuse.
- a11y + focus management must survive the surface swap (focus trap, Escape/dismiss, return focus to trigger).
- Breakpoint source should match the system's (e.g. how AppShell/MobileNav decide "mobile").
Acceptance (post-design)
- A decided mobile experience for the PowerSearch filter editor (bottom sheet or equivalent), composed from a shared Sheet/Drawer + responsive-overlay pattern where possible.
- Coordinated with the responsive workstream (#3912) and Sheet/Drawer (#3675) rather than solved in isolation; a11y preserved; spec reviewed before build.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.