Skip to content

Conversation

@StevenDufresne
Copy link
Contributor

Alternative to #107085.
Related: #107003

Proposed Changes

Adds a PageHeader.ActionMenu wrapper component to specifically handle DropdownMenu on small screens.

Testing Instructions

Visit the following pages on mobile/desktop, expect the dropdown menu to be right-aligned on mobile and right beside the buttons to the right on desktop.

  • /v2/sites/:site
  • /v2/domains/:domain/dns
  • /v2/me/billing/purchases/:purchaseId

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@github-actions
Copy link

github-actions bot commented Nov 14, 2025

@StevenDufresne StevenDufresne marked this pull request as ready for review November 14, 2025 01:53
@StevenDufresne StevenDufresne requested review from a team as code owners November 14, 2025 01:53
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 14, 2025
Copy link
Contributor

@arthur791004 arthur791004 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant to something like below but the current way also looks great 👍

const ActionMenu = ( props: ComponentProps< DropdownMenu > ) => {
  return <DropdownMenu {...props} style={ { marginInlineStart: 'auto' } } />;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants