Notebook layouting compatibility with high DPI / widescreen displays

[richardebeling]

The current notebook breakpoints used to determine whether the layout should be top/bottom or left/right doesn't consider the content width limit that the page otherwise has. On High-DPI or widescreen monitors, this can easily lead to cases where the top/bottom layout is used although the left/right layout would be more appropriate.

This is what currently happens when you zoom out of the page far enough:

I think we might want to

• Limit the width of the notebook in top/bottom mode to the same width as the content of the page
• Use the limited content width for calculating whether the media breakpoint is hit or not (instead of the viewport width, which we currently use)