diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91ee9c211..1f4c7c555 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/package.json b/package.json
index 5cc2f4164..d3205defe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "app",
- "version": "8.4.1",
+ "version": "8.4.2",
"private": true,
"license": "Apache-2.0",
"dependencies": {
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css
index 92ea1e7c1..08f6054e9 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/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;
}
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js
index 2f6f006a5..e50a0ee5b 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.js
@@ -274,10 +274,10 @@ export class AuthenticationPageComponent extends Component {
{loginOrSignupError}
{isLogin ? (
-
+
) : (
this.setState({ tosModalOpen: true })}