From 95ba5b4edb0948c78a739e55a9680c79e7c56a96 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 7 Jul 2021 14:27:22 +0300
Subject: [PATCH] fix(docs-infra): ensure the sidenav backdrop covers the
 floating ToC (#42787)

Previously, on narrow pages where the sidenav was in `over` mode, the
sidenav's backdrop only covered the main docs content but not the
floating Table of Contents (ToC) on the right. This was inconsistent and
confusing to the user, because they could interact with the ToC and
scroll to different area of the main content while the sidenav and
backdrop were still covering the content.

This commit fixes it by ensuring the sidenav backdrop covers both the
main content and the floating ToC (when present).

Fixes #42778

PR Close #42787
---
 aio/src/app/app.component.html                 | 8 ++++----
 aio/src/styles/1-layouts/sidenav/_sidenav.scss | 5 +++--
 aio/src/styles/2-modules/toc/_toc.scss         | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 9ea55e267a..198638d3f7 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -61,11 +61,11 @@
     <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
   </main>
 
-</mat-sidenav-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>
 
-<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>
+</mat-sidenav-container>
 
 <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 35edcd6306..cb9731b240 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss
+++ b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
@@ -9,12 +9,13 @@
 mat-sidenav-container.sidenav-container {
   min-height: 100%;
   height: auto !important;
-  max-width: 100%;
   margin: 0;
   transform: none;
 
   &.has-floating-toc {
-    max-width: 82%;
+    .mat-sidenav-content {
+      padding-right: 18vw;
+    }
   }
 
   .sidenav-content {
diff --git a/aio/src/styles/2-modules/toc/_toc.scss b/aio/src/styles/2-modules/toc/_toc.scss
index 605592ce5c..81ec3edacc 100644
--- a/aio/src/styles/2-modules/toc/_toc.scss
+++ b/aio/src/styles/2-modules/toc/_toc.scss
@@ -18,7 +18,7 @@ $tocMarkerSize: 6;
 }
 
 .toc-container {
-  width: 18%;
+  width: 18vw;
   position: fixed;
   top: 76px;
   right: 0;