From 1d47a4eedda21a867d7ec1703718b12279bfdc04 Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Fri, 30 Oct 2020 18:29:03 +0200
Subject: [PATCH] Fix scroll position on auth pages Fix scroll on auth pages
 for iOS

---
 src/index.hbs                       | 32 ++++++++++-----------------
 src/pages/pagesManager.ts           |  2 +-
 src/scss/partials/pages/_pages.scss | 34 ++++++++++++++++-------------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/index.hbs b/src/index.hbs
index e1cf3a2b..bf073c6f 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -28,10 +28,10 @@
   <![endif]-->
   
   <div class="whole" id="auth-pages" style="display: none;">
-    <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="scrollable scrollable-y">
+      <div class="tabs-container auth-pages__container" data-slider="tabs">
+        <div class="page-sign">
+          <div class="container center-align">
             <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="page-signQR">
+          <div class="container center-align">
             <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="page-authCode">
+          <div class="container center-align">
             <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="page-password">
+          <div class="container center-align">
             <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="page-signUp">
+          <div class="container center-align">
             <div class="auth-image avatar-edit">
               <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
               <span class="tgico tgico-cameraadd"></span>
diff --git a/src/pages/pagesManager.ts b/src/pages/pagesManager.ts
index 0c1d8ee9..91843e82 100644
--- a/src/pages/pagesManager.ts
+++ b/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();
       }
diff --git a/src/scss/partials/pages/_pages.scss b/src/scss/partials/pages/_pages.scss
index 3dab3816..4145501b 100644
--- a/src/scss/partials/pages/_pages.scss
+++ b/src/scss/partials/pages/_pages.scss
@@ -30,9 +30,26 @@
     flex: 0 0 auto;
   }
 
+  > .scrollable {
+    display: flex;
+    flex-direction: column;
+
+    &:before, &:after {
+      content: " ";
+      flex: 1;
+      min-height: 3rem;
+      /* height: 105px; */
+      width: 100%;
+    }
+  }
+
   .tabs-container {
-    height: 100%;
-    width: 100%;
+    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) {