Improve layout for big screens.

[Lukas-Stuehrk]

The current layout has a small issue on big screens. The max width is 1280px, but the navigation on the right side should take 20% of the view port. This works well for small screens, but starting from a certain screen size this logic shrinks the available space of the main content.

Video of the behavior:
https://user-images.githubusercontent.com/245433/115612888-0bddd100-a2ec-11eb-894f-6e616ee086f9.mov

With this change, we change the logic so the nav bar can take at most 20% of the view port. Because of this, the design still works on small screens and limits the size of the nav bar. But it also works for big screens, because the nav bar does not take space which it does not need.

Video of the new behavior:
https://user-images.githubusercontent.com/245433/115613551-d08fd200-a2ec-11eb-92f6-465262eba914.mov

But this also has the side effect that the width of the nav bar is now variable. This means that the size and position of the nav bar can "jump" when navigating between pages. If this behavior is not acceptable, then we need to come up with a more sophisticated solution.

[mattt]

But this also has the side effect that the width of the nav bar is now variable. This means that the size and position of the nav bar can "jump" when navigating between pages. If this behavior is not acceptable, then we need to come up with a more sophisticated solution.

It looks like we can mitigate this by setting a max-width on nav according to the size it'll be at that 1280px breakpoint. Does this look alright to you?

output.mp4

[Lukas-Stuehrk]

Yes, this looks like the proper solution! 👍