refactor: Navbar: constrain max width to same width as the content.

[jankoegel]

Related Rails app PR

• https://github.com/getAlby/getalby.com/pull/272

HELP NEEDED / TODOs

• review code
• depending on responsiveness needs, consider moving the navigation entries ("websites" etc.) a bit more to the right so they are more centered instead of leaning left.
• reviewer: test with an extension development setup (or pair with me / let me know how to set one up)
• reviewer: test responsiveness (current extension's header looks as broken to me on smaller breakpoints as with these changes but I'm not sure!?)

Describe the changes you have made in this PR

• Navbar: constrain max width to same width as the content.
• reason: on desktop the navigation items in the top left and right corners were easy to miss. With this change, everything is closer together and easier to notice.

Type of change

• UI improvement

Screenshots of the changes [optional]

Before

After

How has this been tested?

• ⚠️ I only tested this with my browser's inspector. I don't have a development setup for the extension yet. Ok, I have the development setup for the extension now and everything looked good to me.

[github-actions]

🚀 Thanks for the pull request!

Here are the current build files for testing:

• chrome.zip.zip
• firefox.xpi.zip
• opera.crx.zip

Download and unzip the file for your browser. Refer to the readme for detailed install instructions.

---

This build is brought to you by: Adam Fiscor (who recently dropped 1337 sats):

The future is bright. We just have a lot of work to do.

---

Want to sponsor the next build? send some sats to ⚡️builds@getalby.com (don't forget to provide your name)

Don't forget: keep earning sats!

[escapedcat]

I think this is a good adjustment.

This looks a bit weird, but not to problematic I think:

[jankoegel]

Best reviewed in "split mode". I actually added a new wrapper div to constrain the content's width.
Since I also removed wrapper divs from <AccountMenu>, children and UserMenu it's a bit hard to see the changes in other views.

[jankoegel]

I think this is a good adjustment.

This looks a bit weird, but not to problematic I think:

yes, there is a weird space of about 100px display resolution around 1024px where the wallet icon has space on the left and is not flush with the content's left border. in the same space the negative margin on the children is a problem. Didn't investigate further since responsiveness is not a big focus. We could remove the negative margin, at full-res I felt it looks more centered with it than without.

[jankoegel]

I think this is a good adjustment.

This looks a bit weird, but not to problematic I think

hm, just checked again and it feels like i don't get the children that close to the wallet icon until a much smaller breakpoint on firefox.

[jankoegel]

hm, just checked again and it feels like i don't get the children that close to the wallet icon until a much smaller breakpoint on firefox. Does the following GIF match what you're seeing?

looks the same as in Firefox for me on Chrome.