fix(layout): height

src/app/annuaire/annuaire.component.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  height: calc(100vh - $header-height - $footer-height);
   &.logged {
     justify-content: flex-start;
   }

src/app/app-routing.module.ts

@@ -268,7 +268,6 @@ const routes: Routes = [
         canActivate: [AdminGuard],
         loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
       },
-      footerOutletRoute,
     ],
   },
   {

src/app/app.component.html

@@ -8,7 +8,7 @@
       <router-outlet name="left-pane"></router-outlet>
       <router-outlet></router-outlet>
       <router-outlet name="print"></router-outlet>
-      <router-outlet *ngIf="!loading" name="footer"></router-outlet>
     </ng-container>
   </div>
+  <router-outlet *ngIf="!loading" name="footer"></router-outlet>
 </div>

src/app/app.component.scss

@@ -3,8 +3,9 @@
 @import 'layout';
 
 .app-container {
-  display: block;
+  display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 @media print {
@@ -18,7 +19,9 @@
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  height: calc(100svh - #{$header-height});
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 .loader {

src/app/header/header.component.scss

@@ -15,6 +15,9 @@
   border-bottom: solid 1px $grey-4;
   background-color: $white;
   padding: 0 20px;
+  position: sticky;
+  top: 0;
+  z-index: 50;
   .right-header {
     @media #{$tablet} {
       display: none !important;

src/app/login/login.component.scss

@@ -4,23 +4,32 @@
 @import 'typography';
 
 .loginPage {
+  height: calc(100vh - $header-height - $footer-height);
   display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media #{$phone} {
+    padding: 1rem;
+    align-items: flex-start;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
     width: 100%;
     max-width: 980px;
     box-sizing: border-box;
-  margin: auto;
-  margin-top: 2rem;
-  min-height: 450px;
-  max-height: 80vh;
-  overflow-y: auto;
     color: $grey-1;
     background: $white;
     border-radius: 8px;
     border: 1px solid $grey-6;
     padding: 70px 40px;
-  @media #{$desktop} {
-    padding: 1rem;
-    margin-top: 1rem;
+    * {
+      max-width: 340px;
+    }
   }
 
   .title {
@@ -42,11 +51,6 @@
     color: $orange-warning;
   }
 
-  .form {
-    max-width: 340px;
-    margin: auto;
-  }
-
   .form-group {
     margin: 1.5rem 0;
     .notValidate {
@@ -110,9 +114,3 @@
     }
   }
 }
-
-@media #{$tablet} {
-  .loginPage {
-    height: 100%;
-  }
-}

src/styles.scss

@@ -28,9 +28,6 @@ body {
   padding: 0;
   color: $black;
   background-color: $grey-8;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
-  overflow: hidden;
   ::-webkit-scrollbar {
     width: 8px;
   }