From fee63eaec10011cfa52f656914967052ea32a00d Mon Sep 17 00:00:00 2001
From: Daniel <dwm.kiwi@gmail.com>
Date: Thu, 9 Apr 2020 06:58:21 +0000
Subject: [PATCH] Resolve: "Cut off bottom of slides"

---
 src/app/app.component.html | 3 +++
 src/app/app.component.scss | 6 +++++-
 src/styles.scss            | 6 ++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index cb7a6d4..1a66d6c 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b8214bd..32f39c1 100644
--- a/src/app/app.component.scss
+++ b/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;
diff --git a/src/styles.scss b/src/styles.scss
index 35af340..11761e3 100644
--- a/src/styles.scss
+++ b/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);
 }