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;