fix(cxl-ui): cxl-marketing-nav menu bar button alignment on desktop

[anoblet]

https://app.clickup.com/t/86b2hv84w

Desktop:

Mobile:

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	44.85 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	15.04 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	29.23 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js	157.96 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-institute.js, packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	291.54 KB (0%)

[github-actions]

Visit the preview URL for this PR (updated for commit a95a081):

https://aybolit-449f1--pr442-anoblet-fix-menu-bar-8zlv71mc.web.app

_{(expires Wed, 22 Jan 2025 09:20:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ebc08d8a89b4eb54ebfb0bb50bd15f151f1243f5}

[pawelkmpt]

It doesn't look right on desktop.

[anoblet]

I removed the faded red background for the close icon and changed the nav bar padding from --lumo-space-m to --cxl-wrap-padding. It's hard to get perfect alignment since the logo has whitespace in itself, though it looks better than before. The only issue I see is on desktop. It doesn't look possible to remove the padding or margin for the last menu item(https://stackoverflow.com/a/66664161/3935891) so the help link isn't aligned.

Mobile closed:

Mobile opened:

Desktop:

[pawelkmpt]

@anoblet I deployed it live, looks good in most places but on the dashboard menu is wider than content. I see it uses 1c-w layout.

Please check more non-standard pages on institute so we know if this is just dashboard issue or wider problem.

If just dashboard, propose solution

[lkraav]

It's hard to get perfect alignment since the logo has whitespace in itself, though it looks better than before.

Logo icon itself should absolutely have 0 / zero padding. Anything else is a bug.

[anoblet]

It's difficult to test this locally since WP Starter has a different dashboard/layout, though the result should be this:

I set a max-width for the marketing nav equal to the max-width of the content.

Logo icon itself should absolutely have 0 / zero padding. Anything else is a bug.

There's no left padding on the icon, though the SVG itself has whitespace:

[pawelkmpt]

Nav bottom border is not full width anymore. It's also visible on your screenshot @anoblet

[anoblet]

Nav bottom border is not full width anymore. It's also visible on your screenshot @anoblet

This should be fixed. I moved the border to the marketing nav instead of the inner nav.

[pawelkmpt]

It's still broken. Now bottom border is not visible when the page loads. It appears when you start scrolling.

BEFORE

AFTER

[anoblet]

I missed the display: block; on cxl-marketing-nav. It should work now. My fault, I had this in dev tools, though I didn't add it to the commit.