facebook / facebook/astryx

PowerSearch: improve the mobile edit-popover experience (bottom sheet / responsive overlay; coordinate with responsive + Sheet work)

Open
#4,250 0 comments 0 reactions 1 assignee View on GitHub

@cixzhang is already working on this.

Since Sep 2, 2026.

component enhancement needs-scoping
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.