Merge pull request #120 from sharetribe/update-v6.4.2-from-upstream

v8.4.2

CHANGELOG.md

@@ -17,6 +17,15 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2020-XX-XX
 
+## [v8.4.2] 2020-10-30
+
+### Updates from upstream (FTW-daily v6.4.2)
+
+- [fix] Fix the issue with form on AuthenticationPage not showing on smaller screens when using
+  Safari as browser. [#1377](https://github.com/sharetribe/ftw-daily/pull/1377)
+
+  [v6.4.2]: https://github.com/sharetribe/ftw-hourly/compare/v8.4.1...v8.4.2
+
 ## [v8.4.1] 2020-10-20
 
 ### Updates from upstream (FTW-daily v6.4.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "8.4.1",
+  "version": "8.4.2",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -42,12 +42,43 @@
 .form {
   margin-top: 24px;
 
+  @media (--viewportMedium) {
+    margin-top: 30px;
+    padding-top: 2px;
+  }
+}
+
+.loginForm {
+  margin-top: 24px;
+
+  /* We don't want the form to take the whole space so that on mobile view
+  the social login buttons will be after the sign up button
+  and not in the bottom of the page.
+  We also need to add flex-basis value so that Safari will show the
+  whole form correctly.  */
+  flex-grow: 0;
+  flex-basis: 260px;
+
+  @media (--viewportMedium) {
+    flex-basis: 330px;
+    margin-top: 30px;
+    padding-top: 2px;
+  }
+}
+
+.signupForm {
+  margin-top: 24px;
+
   /* We don't want the form to take the whole space so that on mobile view
   the social login buttons will be after the sign up button
-  and not in the bottom of the page */
+  and not in the bottom of the page.
+  We also need to add flex-basis value so that Safari will show the
+  whole form correctly.  */
   flex-grow: 0;
+  flex-basis: 340px;
 
   @media (--viewportMedium) {
+    flex-basis: 410px;
     margin-top: 30px;
     padding-top: 2px;
   }

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -274,10 +274,10 @@ export class AuthenticationPageComponent extends Component {
         {loginOrSignupError}
 
         {isLogin ? (
-          <LoginForm className={css.form} onSubmit={submitLogin} inProgress={authInProgress} />
+          <LoginForm className={css.loginForm} onSubmit={submitLogin} inProgress={authInProgress} />
         ) : (
           <SignupForm
-            className={css.form}
+            className={css.signupForm}
             onSubmit={handleSubmitSignup}
             inProgress={authInProgress}
             onOpenTermsOfService={() => this.setState({ tosModalOpen: true })}