Fix scroll position on auth pages

Fix scroll on auth pages for iOS

src/index.hbs

@@ -28,10 +28,10 @@
   <![endif]-->
   
   <div class="whole" id="auth-pages" style="display: none;">
+    <div class="scrollable scrollable-y">
       <div class="tabs-container auth-pages__container" data-slider="tabs">
         <div class="page-sign">
           <div class="container center-align">
-          <div class="scrollable scrollable-y">
             <div class="auth-image">
               <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
                 <use href="#logo" />
@@ -58,10 +58,8 @@
             </div>
           </div>
         </div>
-      </div>
         <div class="page-signQR">
           <div class="container center-align">
-          <div class="scrollable scrollable-y">
             <div class="auth-image">
               <canvas id="qr-code"></canvas>
             </div>
@@ -70,10 +68,8 @@
             <div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
           </div>
         </div>
-      </div>
         <div class="page-authCode">
           <div class="container center-align">
-          <div class="scrollable scrollable-y">
             <div class="auth-image"></div>
             <div class="phone-wrapper">
               <h4 class="phone"></h4>
@@ -88,10 +84,8 @@
             </div>
           </div>
         </div>
-      </div>
         <div class="page-password">
           <div class="container center-align">
-          <div class="scrollable scrollable-y">
             <div class="auth-image"></div>
             <h4 class="phone">Enter Your Password</h4>
             <p class="subtitle">Your account is protected with<br>an additional password</p>
@@ -105,10 +99,8 @@
             </div>
           </div>
         </div>
-      </div>
         <div class="page-signUp">
           <div class="container center-align">
-          <div class="scrollable scrollable-y">
             <div class="auth-image avatar-edit">
               <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
               <span class="tgico tgico-cameraadd"></span>

src/pages/pagesManager.ts

@@ -13,7 +13,7 @@ class PagesManager {
 
   constructor() {
     this.pagesDiv = document.getElementById('auth-pages') as HTMLDivElement;
-    this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild as HTMLDivElement, null, () => {
+    this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild.firstElementChild as HTMLDivElement, null, () => {
       if(this.page.onShown) {
         this.page.onShown();
       }

src/scss/partials/pages/_pages.scss

@@ -30,9 +30,26 @@
     flex: 0 0 auto;
   }
 
-  .tabs-container {
-    height: 100%;
+  > .scrollable {
+    display: flex;
+    flex-direction: column;
+
+    &:before, &:after {
+      content: " ";
+      flex: 1;
+      min-height: 3rem;
+      /* height: 105px; */
       width: 100%;
+    }
+  }
+
+  .tabs-container {
+    max-width: 720px;
+    min-width: auto;
+    margin: 0 auto;
+    overflow-x: hidden;
+    /* height: 100%;
+    width: 100%; */
 
     > div {
       /* justify-content: center; */
@@ -48,19 +65,6 @@
         flex-direction: column;
       }
     }
-
-    .container > .scrollable {
-      display: flex;
-      flex-direction: column;
-
-      &:before, &:after {
-        content: " ";
-        flex: 1;
-        min-height: 3rem;
-        /* height: 105px; */
-        width: 100%;
-      }
-    }
   }
 
   // @media (max-height: 858px) {