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

@@ -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>

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 {

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;