EPMRPP-76889 || Fixes of mobile/tablet view for registration (#3104)

Co-authored-by: Artsiom Sadouski <artsiom_sadouski@epam.com>
reportportal · May 23, 2022 · 859dae5 · 859dae5
1 parent 362c259
commit 859dae5
Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/app/src/pages/outside/registrationPage/registrationForm/registrationForm.scss b/app/src/pages/outside/registrationPage/registrationForm/registrationForm.scss
@@ -24,7 +24,7 @@
   }
   @media (max-width: $SCREEN_XS_MAX) {
     width: 100%;
-    padding: 25px 20px;
+    padding: 0 20px;
     box-sizing: border-box;
   }
 }
@@ -47,6 +47,10 @@
 .confirm-password-field {
   width: 100%;
   margin-bottom: 50px;
+
+  @media (max-width: $SCREEN_SM_MAX) {
+    margin-bottom: 32px;
+  }
 }
 .buttons-container {
   width: 355px;

diff --git a/app/src/pages/outside/registrationPage/registrationPage.jsx b/app/src/pages/outside/registrationPage/registrationPage.jsx
@@ -71,7 +71,7 @@ export const RegistrationPage = ({
         </RegistrationPageSection>
         <RegistrationPageSection failed={!tokenActive || !tokenProvided}>
           {tokenProvided && tokenActive ? (
-            <div>
+            <div className={cx('main-content')}>
               <BlockHeader header={messages.welcome} hint={messages.registration} />
               <RegistrationForm email={email} submitForm={onRegistrationSubmit} loading={loading} />
             </div>

diff --git a/app/src/pages/outside/registrationPage/registrationPage.scss b/app/src/pages/outside/registrationPage/registrationPage.scss
@@ -154,3 +154,12 @@
   color: $COLOR--tealish;
   text-decoration: none;
 }
+.main-content {
+  @media (max-width: $SCREEN_SM_MAX) {
+    margin-top: 90px;
+  }
+
+  @media (max-width: $SCREEN_XS_MAX) {
+    margin-top: 73px;
+  }
+}
diff --git a/app/src/pages/outside/registrationPage/registrationPageSection/registrationPageSection.scss b/app/src/pages/outside/registrationPage/registrationPageSection/registrationPageSection.scss
@@ -50,7 +50,7 @@
       max-height: none;
       background-color: transparent;
       width: 100%;
-      height: 100%;
+      height: 661px;
     }
   }
 }