fix(dropdown-menu): avoid overflow at bottom of viewport by dkoo · Pull Request #4495 · Automattic/newspack-plugin

dkoo · 2026-02-18T17:48:54Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Something I noticed while testing #4471. The dropdown menu avoids rendering itself beyond the right edge of the viewport when the container is close to the edge, but not the bottom. This adds a similar fix to avoid rendering beyond the bottom of the viewport.

How to test the changes in this Pull Request:

This is easiest to test in My Account at a mobile-sized viewport.

Log into My Account and visit My Subscription.
On trunk, in a mobile-sized viewport, scroll to the bottom and click/tap the three-dot dropdown menu icon under "Billing history". Observe that the menu renders below the visible part of the viewport, obscuring the menu items:

Check out this branch and refresh. Open the same dropdown menu and confirm that it renders anchored to the bottom-right corner of the visible viewport, with all menu items visible:

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

Copilot

Pull request overview

This PR fixes an issue where dropdown menus render beyond the bottom edge of the viewport on mobile devices. It adds vertical overflow detection logic similar to the existing horizontal overflow detection, repositioning dropdowns that would otherwise be partially hidden.

Changes:

Added vertical overflow detection to reposition dropdowns when they would extend beyond the bottom of the viewport
Removed unnecessary intermediate variable viewportWidth in favor of direct window.innerWidth usage
Applied consistent string quote style (single quotes) throughout the modified code

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

thomasguillot

Nicely spotted!
The only thing I'd say is the content of the dropdown needs to be above the kebab menu. Right now it goes in front of the button

dkoo · 2026-02-27T22:22:12Z

@thomasguillot good point, here's what it looks like now:

thomasguillot

Thank you @dkoo

github-actions · 2026-03-03T18:07:15Z

Hey @dkoo, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.35.0-alpha.1](v6.34.2...v6.35.0-alpha.1) (2026-03-05) ### Bug Fixes * allow deletion of payment method for Braintree ([63ceec3](63ceec3)) * apply Copilot suggestion for tests ([6133636](6133636)) * **avatar:** correct duotone selector to support custom colors ([#4513](#4513)) ([c4458d4](c4458d4)) * **byline:** update placeholder text to "Author Name" ([#4510](#4510)) ([727b1e8](727b1e8)) * **co-authors-plus:** sanitize user_login before building dummy email… ([#4520](#4520)) ([32c2602](32c2602)) * do not depend on _get() to return an array ([2816470](2816470)) * **dropdown-menu:** avoid overflow at bottom of viewport ([#4495](#4495)) ([a5ce464](a5ce464)) * enable payment method deletion for Braintree ([c50f094](c50f094)) * iframe editor compatiblity ([#4444](#4444)) ([12dfaba](12dfaba)) * **my-account:** don't show subscription payment notice in modal checkout ([#4500](#4500)) ([2cb3324](2cb3324)) * **my-account:** force white background color ([#4514](#4514)) ([02e2555](02e2555)) * **my-account:** resubscription validation in order-again template ([#4498](#4498)) ([36871fc](36871fc)) * **newspack-icon:** background color ([#4516](#4516)) ([8c5dc9c](8c5dc9c)) * **newspack-ui:** remove overflow when modal is open ([#4515](#4515)) ([0b2cbd3](0b2cbd3)) * prune read-only keys from sync queue ([bf81734](bf81734)) * remove unused 'edit' and 'save' actions from Braintree payment methods ([8f72a8d](8f72a8d)) * **snackbar:** autohide progress bar not always appearing ([#4504](#4504)) ([4eda60f](4eda60f)) ### Features * identify and enforce read-only items for Reader Data Library ([4f2ef8a](4f2ef8a)) * add featured image caption block ([#4519](#4519)) ([0b744ff](0b744ff)) * **author-profile:** avatar and social blocks for nested author profile ([#4448](#4448)) ([cff670b](cff670b)) * **content-gate:** comment restriction with metering support ([#4529](#4529)) ([714c8b7](714c8b7)) * **content-gate:** per-post access control exemption ([#4530](#4530)) ([636679b](636679b)) * **content-gate:** user access information ([#4542](#4542)) ([b49347e](b49347e)) * **content-gating:** group subscription invitations data structure + admin UI ([#4536](#4536)) ([e609e83](e609e83)) * **content-gating:** i3 designs for content gates list view ([#4512](#4512)) ([dcbb239](dcbb239)) * **corrections:** append corrections to Republication Tracker Tool content ([#4501](#4501)) ([71bd177](71bd177)) * data event handler registration and dispatching to integrations ([#4481](#4481)) ([7c79da6](7c79da6)) * **data-events:** add ActionScheduler logging and retry reason ([#4488](#4488)) ([e8af964](e8af964)) * **integrations:** make sure contact data is read from persistent data ([#4505](#4505)) ([c2ee26a](c2ee26a)) * **integrations:** start get fields abstraction and pull contact data ([#4470](#4470)) ([8ddcf23](8ddcf23)), closes [#4477](#4477) * **reader-registration-block:** password, OTP, and verification flows ([#4452](#4452)) ([fc4567e](fc4567e)) * reject changes to specific reader data keys ([fe52e12](fe52e12))

github-actions · 2026-03-05T19:49:35Z

🎉 This PR is included in version 6.35.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.35.0](v6.34.4...v6.35.0) (2026-03-16) ### Bug Fixes * allow deletion of payment method for Braintree ([63ceec3](63ceec3)) * apply Copilot suggestion for tests ([6133636](6133636)) * **avatar:** correct duotone selector to support custom colors ([#4513](#4513)) ([c4458d4](c4458d4)) * **byline:** update placeholder text to "Author Name" ([#4510](#4510)) ([727b1e8](727b1e8)) * **co-authors-plus:** sanitize user_login before building dummy email… ([#4520](#4520)) ([32c2602](32c2602)) * do not depend on _get() to return an array ([2816470](2816470)) * **dropdown-menu:** avoid overflow at bottom of viewport ([#4495](#4495)) ([a5ce464](a5ce464)) * enable payment method deletion for Braintree ([c50f094](c50f094)) * iframe editor compatiblity ([#4444](#4444)) ([12dfaba](12dfaba)) * **my-account:** don't show subscription payment notice in modal checkout ([#4500](#4500)) ([2cb3324](2cb3324)) * **my-account:** force white background color ([#4514](#4514)) ([02e2555](02e2555)) * **my-account:** resubscription validation in order-again template ([#4498](#4498)) ([36871fc](36871fc)) * **newspack-icon:** background color ([#4516](#4516)) ([8c5dc9c](8c5dc9c)) * **newspack-ui:** remove overflow when modal is open ([#4515](#4515)) ([0b2cbd3](0b2cbd3)) * prune read-only keys from sync queue ([bf81734](bf81734)) * remove unused 'edit' and 'save' actions from Braintree payment methods ([8f72a8d](8f72a8d)) * **snackbar:** autohide progress bar not always appearing ([#4504](#4504)) ([4eda60f](4eda60f)) ### Features * identify and enforce read-only items for Reader Data Library ([4f2ef8a](4f2ef8a)) * add featured image caption block ([#4519](#4519)) ([0b744ff](0b744ff)) * **author-profile:** avatar and social blocks for nested author profile ([#4448](#4448)) ([cff670b](cff670b)) * **content-gate:** comment restriction with metering support ([#4529](#4529)) ([714c8b7](714c8b7)) * **content-gate:** per-post access control exemption ([#4530](#4530)) ([636679b](636679b)) * **content-gate:** user access information ([#4542](#4542)) ([b49347e](b49347e)) * **content-gating:** group subscription invitations data structure + admin UI ([#4536](#4536)) ([e609e83](e609e83)) * **content-gating:** i3 designs for content gates list view ([#4512](#4512)) ([dcbb239](dcbb239)) * **corrections:** append corrections to Republication Tracker Tool content ([#4501](#4501)) ([71bd177](71bd177)) * data event handler registration and dispatching to integrations ([#4481](#4481)) ([7c79da6](7c79da6)) * **data-events:** add ActionScheduler logging and retry reason ([#4488](#4488)) ([e8af964](e8af964)) * **integrations:** make sure contact data is read from persistent data ([#4505](#4505)) ([c2ee26a](c2ee26a)) * **integrations:** start get fields abstraction and pull contact data ([#4470](#4470)) ([8ddcf23](8ddcf23)), closes [#4477](#4477) * **reader-registration-block:** password, OTP, and verification flows ([#4452](#4452)) ([fc4567e](fc4567e)) * reject changes to specific reader data keys ([fe52e12](fe52e12))

github-actions · 2026-03-16T18:20:59Z

🎉 This PR is included in version 6.35.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

fix(dropdown-menu): avoid overflow at bottom of viewport

e4a2d46

dkoo requested a review from thomasguillot February 18, 2026 17:48

dkoo self-assigned this Feb 18, 2026

Copilot AI review requested due to automatic review settings February 18, 2026 17:48

dkoo requested a review from a team as a code owner February 18, 2026 17:48

dkoo added the [Status] Needs Design Review label Feb 18, 2026

Copilot started reviewing on behalf of dkoo February 18, 2026 17:50 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

Comment thread src/newspack-ui/js/dropdowns.js

Comment thread src/newspack-ui/js/dropdowns.js

dkoo added the [Status] Needs Review The issue or pull request needs to be reviewed label Feb 19, 2026

thomasguillot requested changes Feb 23, 2026

View reviewed changes

github-actions Bot added the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Feb 23, 2026

dkoo added 2 commits February 27, 2026 15:17

Merge branch 'trunk' into fix/dropdown-overflow

16ba3b7

fix: avoid covering kebab menu icon with dropdown menu

316568f

dkoo requested a review from thomasguillot February 27, 2026 22:22

thomasguillot requested changes Mar 2, 2026

View reviewed changes

Comment thread src/newspack-ui/js/dropdowns.js Outdated

dkoo added 2 commits March 3, 2026 09:51

fix: use button height instead of hardcoded height

c55df80

style: 8px, not 4px

d753c5c

dkoo requested a review from thomasguillot March 3, 2026 16:51

thomasguillot approved these changes Mar 3, 2026

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Mar 3, 2026

thomasguillot added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Design Approved and removed [Status] Approved The pull request has been reviewed and is ready to merge [Status] Needs Design Review labels Mar 3, 2026

dkoo merged commit a5ce464 into trunk Mar 3, 2026
11 checks passed

dkoo deleted the fix/dropdown-overflow branch March 3, 2026 18:07

github-actions Bot added the needs-changelog label Mar 3, 2026

dkoo removed the needs-changelog label Mar 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(dropdown-menu): avoid overflow at bottom of viewport#4495

fix(dropdown-menu): avoid overflow at bottom of viewport#4495
dkoo merged 5 commits intotrunkfrom
fix/dropdown-overflow

dkoo commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

thomasguillot left a comment

Uh oh!

dkoo commented Feb 27, 2026

Uh oh!

Uh oh!

thomasguillot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 3, 2026

Uh oh!

github-actions Bot commented Mar 5, 2026

Uh oh!

github-actions Bot commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

dkoo commented Feb 18, 2026

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

thomasguillot left a comment

Choose a reason for hiding this comment

Uh oh!

dkoo commented Feb 27, 2026

Uh oh!

Uh oh!

thomasguillot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 3, 2026

Uh oh!

github-actions Bot commented Mar 5, 2026

Uh oh!

github-actions Bot commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants