From 458a9d0013b9dd9c1936c95ade6db4c8d20e5474 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Sat, 20 Jun 2020 15:22:58 +0200
Subject: [PATCH] Fix scrolling on safari

---
 frontend/src/app/app.component.html | 12 ++++----
 frontend/src/app/app.component.scss | 48 +++++++++++++++++------------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index bda1690..8e0575f 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -4,9 +4,9 @@
   </button>
   <h1 class="title">Travopti - Prototype</h1>
 </mat-toolbar>
-<mat-drawer-container class="content">
-  <mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile" class="drawer">
-    <div class="nav">
+<mat-drawer-container autosize class="drawer">
+  <mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile">
+    <div class="side-nav">
       <a (click)="isMobile&&drawer.close()" mat-button routerLink="home" routerLinkActive="active">
         <mat-icon>home</mat-icon>
         <span>Home</span>
@@ -21,11 +21,11 @@
       </a>
     </div>
   </mat-drawer>
-  <div class="routed-component-wrapper">
-    <div class="routed-component">
+  <mat-drawer-content class="content">
+    <div class="router-outlet">
       <router-outlet></router-outlet>
     </div>
-  </div>
+  </mat-drawer-content>
 </mat-drawer-container>
 
 
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 4d373b1..fca90cf 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -1,31 +1,36 @@
 :host {
+  height: 100vh;
+  width: 100vw;
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
+  flex-flow: column;
 }
 
 .toolbar {
   flex: 0 0 auto;
-  box-sizing: border-box;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
 
   .menu-btn {
     margin-right: 1rem;
   }
 
   .title {
-    flex: 1 1 auto
+    flex: 1 1 auto;
+    margin: 0;
   }
 }
 
 .drawer {
-  padding: 1rem;
-  min-width: 10%;
+  flex: 1 1 auto;
 
-  .nav {
+  .side-nav {
     display: flex;
     flex-direction: column;
+    height: 100%;
+    min-width: 10vw;
+    box-sizing: border-box;
+    padding: 1rem 0;
 
     a {
       margin-bottom: 0.5rem;
@@ -47,23 +52,26 @@
 }
 
 .content {
-  flex: 1 1 auto;
+  padding: 2rem;
   box-sizing: border-box;
-}
-
-.routed-component-wrapper {
-  width: 100%;
-  height: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
 
-  .routed-component {
-  flex: 0 1 auto;
-    box-sizing: border-box;
-    padding: 1rem;
+  .router-outlet {
     width: 100%;
     max-width: 700px;
+    height: 100%;
+    box-sizing: border-box;
   }
 }
 
+.mat-drawer-container {
+  overflow-y: visible;
+  box-sizing: border-box;
+}
+
+
+