I see the problem, but I'm not a fan of the "magic" numbers for pushing things around. Looks like the container for the ellipsis menu in the list view has a width of 24px, while the one next to the title is 36px. We could solve this by removing the padding on the ellipsis menu on the title.

Something like .sidebar-navigation__more-menu .components-button.has-icon { padding:0;} should do the trick. It might need tweaking the min-width value to 24px too (that must be a sass variable somewhere)

Size Change: +167 B (0%)

Total Size: 1.4 MB

_{compressed-size-action}

Flaky tests detected in 31f7c05.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5290981957
📝 Reported issues:

• [Flaky Test] Submenu interactions #51552 in /test/e2e/specs/editor/blocks/navigation.spec.js
• [Flaky Test] ensures paragraph block toolbar uses roving tabindex #49733 in /test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
• [Flaky Test] page-list submenu user interactions #51348 in /test/e2e/specs/editor/blocks/navigation.spec.js

We could solve this by removing the padding on the ellipsis menu on the title.

I'm reluctant to do this as I assume that the ellipsis position in the title area is the correct one. My preference is to make the lower section wider to also give more space for longer navigation items, but I take your point that magic values aren't good. Closing this for now.

There's a padding that makes the lower section narrower (in .edit-site-sidebar-navigation-screen__content), maybe we wanna play with that. @jasmussen you said there were some visual polishing coming up for browse mode, is this included?

I think @jameskoster has driven some of those design efforts, and might be better equipped to answer.

Some metrics may change for 6.3, but I don't sense a great deal of urgency around that, so they may not.

I'm reluctant to do this as I assume that the ellipsis position in the title area is the correct one

I think this is a good assumption. And so it makes most sense for the Navigation elements to align themselves with what already exists in the sidebar, rather than the other way around.

<ItemGroup>s have a negative margin applied in order to align their children. You can see this in effect on the main Design panel, Pages, and Templates lists too. I don't know if it's good practise, but could the navigation menu be wrapped in an <ItemGroup>? That gets us here:

The remaining small misalignment is due to the ellipsis buttons using different size variants. The panel header uses the default size (36px) while the navigation menu item uses the small variant (24px). Could some logic be added to the navigation menu items to use the default size variant in the sidebar? That gets us to perfect alignment in a way that avoids magic numbers and should be backwards compatible: