Fix form padding and margins (#255)

src/_style.scss

@@ -16,6 +16,7 @@ $apple-focus-black: $apple-black;
 $accent-a-light: #c9f2f5;
 
 .main-content {
+  @extend .pt-4;
   min-width: 464px !important;
 }
 
@@ -353,6 +354,7 @@ select.form-control {
 
   .main-content {
     min-width: 100vw !important;
+    padding: 1.5rem !important;
   }
 }
 

src/common-components/LargeScreenRightLayout.jsx

@@ -7,8 +7,8 @@ const LargeScreenRightLayout = (props) => {
   const { children } = props;
 
   return (
-    <Col xs={6} className="min-vh-100 d-flex justify-content-center mt-5">
-      { children }
+    <Col xs={6} className="min-vh-100 d-flex justify-content-center">
+      <div className="mt-5">{ children }</div>
     </Col>
   );
 };

src/common-components/Logistration.jsx

@@ -23,7 +23,7 @@ const Logistration = (props) => {
           {intl.formatMessage(messages['logistration.login'])}
         </Link>
       </span>
-      <div id="main-content" className="p-2 main-content">
+      <div id="main-content" className="main-content">
         {selectedPage === LOGIN_PAGE ? <LoginPage /> : <RegistrationPage />}
       </div>
     </div>

src/common-components/MediumScreenLayout.jsx

@@ -9,8 +9,8 @@ const MediumScreenLayout = (props) => {
   return (
     <>
       <MediumScreenHeader />
-      <div className="mt-5 d-flex align-items-center justify-content-center">
-        { children }
+      <div className="d-flex align-items-center justify-content-center">
+        <div className="mt-5">{ children }</div>
       </div>
     </>
   );