2063827 - Ugly dropdown menu alignment in Project Nova redesign

Status: NEW

(Firefox :: Theme, defect, P2)

Description

[randomguy-2650]

Attachment: Dropdown menu alignment in about:addons

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0

Steps to reproduce:

1. Go to a page with a dropdown menu (not the ones that are rendered with native UI), for example about:addons.
2. Assuming you’re testing on about:addons, click on the Themes navigation item.
3. Then click on the Settings button with the gear/cog icon next to the “Manage Your Themes” heading.

Actual results:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:156.0) Gecko/20100101 Firefox/156.0
Operating system: Windows 11 25H2 Build 26200.8973 (likely a cross‐platform bug)
Browser: Firefox Nightly 156.0a1 (2026-08-15) 64-bit

See attached screenshot to understand the description better.

Each menu item is 32 px tall and its border radius is set to 20 px (effectively 16 px because of 32 px height).

The menu itself has 24 px border radius. The top and bottom padding of the menu is 4 px, the left and right padding is 8 px.

24 px (menu radius) − 4 px (menu padding along y‐axis) = 20 px (goes back to 16 px)

Expected results:

This violates design guidelines, it looks off and doesn’t make the alignment of the menu in comparison to its items consistent and concentric.

My suggestion is setting the menu padding to 4 px on all sides instead of a 4 px/8 px mix and having its border radius set to 20 px instead of 24 px. Then setting the menu item border radius to 16 px would make it look way more consistent.

Side note: The checkmarks in menu items look a bit too rounded, it’s a bit ugly.

Comment 1

[randomguy-2650]

Accidentally ticked the wrong box, please revert security issue tag

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Firefox for Android::General' component, but is not confident enough to move the bug to that component.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Agreed, the border-radius there is too large and the mismatch of menu / menuitem border radius looks broken.

The menu item radius (inner) comes from --panel-item-button-border-radius with a value of 16px.
The menu (outer) element is a panel-list and gets its border-radius from: --panel-list-border-radius with a value of 24px.

Comment 4

[Sam Foster [:sfoster] (he/him)]

Adding a couple of related bugs.