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.87 KB (+0.13% 🔺)
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.55 KB (+0.02% 🔺)

[github-actions]

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

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

_{(expires Fri, 10 Jan 2025 15:49:16 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: