From ef140a76d9ef50f98c86fd45adfee048dfd3e7e7 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 25 Nov 2021 21:18:58 +0200
Subject: [PATCH] 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                | 24 +++++++++++--------
 .../styles/1-layouts/sidenav/_sidenav.scss    | 10 +++++---
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 2412109185c..f2ed423294d 100644
--- a/aio/src/app/app.component.html
+++ b/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>
diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
index 4bf65dd1269..d17b79ece94 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss
+++ b/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 {