Client - fix app height

fittrackee_client/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <NavBar />
+  <div class="app-container">
     <router-view />
+  </div>
   <Footer />
 </template>
 
@@ -21,4 +23,7 @@
 
 <style lang="scss">
   @import '~@/scss/base';
+  .app-container {
+    height: $app-height;
+  }
 </style>

fittrackee_client/src/components/BikePic.vue

@@ -25,11 +25,7 @@
     justify-content: center;
 
     padding: $default-padding;
-    height: calc(100vh - 100px);
+    height: 100%;
-
-    @media screen and (max-width: $medium-limit) {
-      height: auto;
-    }
 
     .bike-img {
       max-width: 40%;

fittrackee_client/src/components/User/LoginOrRegisterForm.vue

@@ -101,10 +101,9 @@
   #login-form {
     display: flex;
     align-items: center;
-    height: calc(100vh - 100px);
 
-    border-radius: 4px;
     margin: $default-margin 0;
+    height: 100%;
 
     #user-form {
       width: 60%;

fittrackee_client/src/scss/vars.scss

@@ -5,6 +5,11 @@ $container-width: 1140px;
 $medium-limit: 1000px;
 $small-limit: 500px;
 
+/*
+* === HEIGHT ===
+*/
+$app-height: calc(100vh - 130px);
+
 /*
 * === PADDING / MARGIN ===
 */

fittrackee_client/src/views/LoginOrRegister.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="login">
+  <div id="loginOrRegister">
     <div class="container">
       <div class="container-sub">
         <BikePic />
@@ -35,14 +35,15 @@
 <style lang="scss">
   @import '~@/scss/base';
 
-  #login {
+  #loginOrRegister {
-    height: 84vh;
+    height: 100%;
+
     .container {
       display: flex;
       flex-direction: row;
-      flex-wrap: wrap;
       justify-content: space-evenly;
 
+      height: 100%;
       margin-bottom: $default-margin * 2;
 
       .container-sub {
@@ -50,9 +51,7 @@
       }
 
       @media screen and (max-width: $medium-limit) {
-        flex-direction: column;
+        display: block;
-        flex-wrap: nowrap;
-
         .container-sub {
           .bike-img {
             margin-top: $default-margin * 1.5;