fix(docs-infra): fix the main content layout (#44282)

Fix the layout of the main docs content on both small and large screens.
On small screens, content could overlap with the floating ToC, while on
large screens the content was not centered correctly (see screenshots
below).

(For reference, this was accidentally broken in #44236.)

**Before:**
- ![content on small screen before](https://user-images.githubusercontent.com/8604205/143491577-97255ee7-f79d-4c95-9287-ff2afeb5b29d.png)
- ![content on large screen before](https://user-images.githubusercontent.com/8604205/143491582-2c19f7a2-d5ad-475a-a58b-e449efc492a9.png)

**After:**
- ![content on small screen after](https://user-images.githubusercontent.com/8604205/143491580-a405f650-cd4a-4804-8e65-422fc91f4c6e.png)
- ![content on large screen after](https://user-images.githubusercontent.com/8604205/143491585-d0d2e914-a1a2-45ba-8e6b-b9546aa80354.png)

PR Close #44282

aio/src/app/app.component.html

@@ -56,17 +56,21 @@
     </div>
   </mat-sidenav>
 
-  <main class="sidenav-content" [id]="pageId" role="main">
-    <div id="main-content" tabindex="-1"></div>
-    <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
-    <aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
-    </aio-doc-viewer>
-    <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
-  </main>
+  <section class="sidenav-content-container">
 
-  <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
-    <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
-  </div>
+    <main class="sidenav-content" [id]="pageId" role="main">
+      <div id="main-content" tabindex="-1"></div>
+      <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
+      <aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
+      </aio-doc-viewer>
+      <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
+    </main>
+
+    <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
+      <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
+    </div>
+
+  </section>
 
   <footer class="no-print">
     <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>

aio/src/styles/1-layouts/sidenav/_sidenav.scss

@@ -13,13 +13,17 @@ mat-sidenav-container.sidenav-container {
   transform: none;
 
   &.has-floating-toc {
-    .sidenav-content {
-      margin-right: 18vw;
+    .sidenav-content-container {
+      padding-right: 18vw;
     }
   }
 
-  .sidenav-content {
+  .sidenav-content-container {
     height: auto;
+
+    .sidenav-content {
+      overflow-x: auto;
+    }
   }
 
   mat-sidenav.sidenav {