Skip to content

Popover component: Improve Visibility When Hitting Viewport Edge #69553

@okmttdhr

Description

@okmttdhr

What problem does this address?

The Popover component in @wordpress/components does not currently provide a way to specify an offset when it meets the viewport edge. A popover appears cut off or unclear when positioned near the screen boundary.

This issue was observed in DataViews' settings dropdown. Although the dropdown is scrollable and remains functional, it is not visually clear that content is accessible via scrolling. Users may mistakenly believe that the menu is truncated instead of fully available.

Image

This issue affects any UI that relies on Popover for dropdowns, modals, or floating panels.

What is your proposed solution?

  • Expose a new prop in the Popover component, similar to the existing overflowPadding prop from Ariakit's popover component.
  • Use this new prop in Popover to add a small offset when calculating max height, ensuring that popovers are never flush with the viewport edge.
  • Allow DataViews (and other components relying on Popover) to leverage this enhancement, improving visibility without requiring manual workarounds.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions