Resolve: "Cut off bottom of slides"

src/app/app.component.html

@@ -26,6 +26,9 @@
     <main class="content">
       <router-outlet></router-outlet>
     </main>
+    <!-- These two toolbars are for padding the content so the real toolbars do not block content when scrolled down -->
+    <mat-toolbar class="toolbar-padding"></mat-toolbar>
+    <mat-toolbar *ngIf="fastSwitching" class="toolbar-padding"></mat-toolbar>
     <footer>
       <mat-toolbar class="footer">
         <button mat-icon-button (click)="previousItem()" matTooltip="Previous item">

src/app/app.component.scss

@@ -15,7 +15,7 @@ mat-sidenav {
 }
 
 mat-sidenav-container {
-  min-height: 100vh;
+  flex: 1;
 }
 
 mat-slide-toggle {
@@ -24,6 +24,10 @@ mat-slide-toggle {
   font-size: 80%;
 }
 
+.toolbar-padding {
+  visibility: hidden;
+}
+
 .fast-access {
   display: flex;
   justify-content: space-around;

src/styles.scss

@@ -21,6 +21,12 @@ html, body {
   padding: 0;
 }
 
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 mat-sidenav-layout {
   background: rgba(0,0,0,0.03);
 }