docs.amplify.aws content viewport is too constrained from 13" MacBook

Describe the bug From a 13" MacBook, the main content of the docs site is too constrained, and it creates a usability issue.

The website includes a left nav-bar, and a right nav-bar, and a top nav-bar. The three bars constrain the main content view considerably. The purpose of the docs site is vend content. However, I need to scroll around to actually engage with the content.

To Reproduce Steps to reproduce the behavior:

1. Go to https://docs.amplify.aws/lib/auth/getting-started/q/platform/android#initialization
2. View any of the code snippets. Note that the content viewport displays a very small portion of them, since the left and right nav bars constrain the visible content considerably.

Expected behavior I expect to see documentation content to be more focused in the window.

The nav bars don’t just create too small of a space for the content, they also visually distract from the content.

One or more of the nav bars should disappear automatically, or possibly not even be part of the layout, for a screen of my size.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS X Mojave 10.14.6
• Browser: Google Chrome Version 81.0.4044.129 (Official Build) (64-bit)
• User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
• MacBook Pro, Retina, 13-inch, Early 2015
• Screen size: 13.3-inch (2560 x 1600)

[jamesonwilliams]

@swaminator Yea, that could work! I think there are potentially a number of different ways to deal with it. Here are a few that come to my mind:

1. Like you say, making the bars “collapsible”; a. As a P1, having them automatically animate-collapse when the mouse is in the content area;
2. Falling back to a different layout (mobile layout?) on screens that are smaller than your desktop-design target;
3. Fixing the navs to the document, instead of to the window. Then, allowing content to flow under/around the divs. The content would be bounded by body padding in the widest parts, and bounded between the two fixed bars, in the narrowest parts;
4. Making a “small screens” layout, that uses a single nav bar (like the old docs site, sigh.)

[mauerbac]

@brene , this looks a lot better when mimicking a 13inch screen. Will close out. Thanks