fix(mobile) : fix responsive mobile

src/app/app.component.ts

@@ -21,5 +21,14 @@ export class AppComponent {
     if (this.authService.isLoggedIn()) {
       this.profilService.getProfile();
     }
+    this.setHeightApp();
+    window.addEventListener('resize', () => {
+      this.setHeightApp();
+    });
+  }
+
+  private setHeightApp(): void {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
   }
 }

src/app/form/form.component.scss

@@ -16,11 +16,11 @@ h3 {
 .form {
   background: white;
   width: 100vw;
-  height: calc(100vh - #{$header-height} - #{$footer-height});
+  height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height});
   top: #{$header-height};
   z-index: $structure-details-z-index;
   @media #{$tablet} {
-    height: calc(100vh - #{$header-height});
+    height: calc(var(--vh, 1vh) * 100 - #{$header-height});
     position: fixed; //Hide default header app.
   }
 }
@@ -137,7 +137,6 @@ h3 {
     height: auto;
     color: $grey-1;
     &.home {
-      height: 100%;
       .btnStart {
         margin-top: 90px;
         margin-bottom: 10px;

src/app/header/header.component.scss

@@ -101,7 +101,7 @@ a {
   animation: slideMenu 0.5s;
   .menu-content {
     background-color: $white;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     width: 350px;
     padding: 27px 25px;
   }

src/styles.scss

@@ -74,9 +74,6 @@ a {
   &.full-screen {
     min-height: calc(100vh - #{$header-height} - #{$footer-height});
   }
-  @media #{$phone} {
-    padding-top: 30px;
-  }
 }
 .section-container {
   width: 80%;