From 57d459f78fa5eee605f572b41464754361df5cf4 Mon Sep 17 00:00:00 2001
From: Arnelle Balane <arnellebalane@gmail.com>
Date: Fri, 23 Oct 2020 02:00:58 +0800
Subject: [PATCH] Position error tooltip below form field on narrow screen
 sizes

---
 components/forms/AccountEditForm.js     | 12 ++++++++----
 components/forms/ChangePasswordForm.js  | 18 ++++++++++++------
 components/forms/DeleteForm.js          |  6 ++++--
 components/forms/LoginForm.js           | 12 ++++++++----
 components/forms/WebsiteEditForm.js     | 12 ++++++++----
 components/layout/FormLayout.module.css | 20 ++++++++++++++++++--
 6 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/components/forms/AccountEditForm.js b/components/forms/AccountEditForm.js
index 63949f00..cc000cf7 100644
--- a/components/forms/AccountEditForm.js
+++ b/components/forms/AccountEditForm.js
@@ -58,15 +58,19 @@ export default function AccountEditForm({ values, onSave, onClose }) {
               <label htmlFor="username">
                 <FormattedMessage id="label.username" defaultMessage="Username" />
               </label>
-              <Field name="username" type="text" />
-              <FormError name="username" />
+              <div>
+                <Field name="username" type="text" />
+                <FormError name="username" />
+              </div>
             </FormRow>
             <FormRow>
               <label htmlFor="password">
                 <FormattedMessage id="label.password" defaultMessage="Password" />
               </label>
-              <Field name="password" type="password" />
-              <FormError name="password" />
+              <div>
+                <Field name="password" type="password" />
+                <FormError name="password" />
+              </div>
             </FormRow>
             <FormButtons>
               <Button type="submit" variant="action">
diff --git a/components/forms/ChangePasswordForm.js b/components/forms/ChangePasswordForm.js
index d96a1336..9c41bd55 100644
--- a/components/forms/ChangePasswordForm.js
+++ b/components/forms/ChangePasswordForm.js
@@ -66,22 +66,28 @@ export default function ChangePasswordForm({ values, onSave, onClose }) {
               <label htmlFor="current_password">
                 <FormattedMessage id="label.current-password" defaultMessage="Current password" />
               </label>
-              <Field name="current_password" type="password" />
-              <FormError name="current_password" />
+              <div>
+                <Field name="current_password" type="password" />
+                <FormError name="current_password" />
+              </div>
             </FormRow>
             <FormRow>
               <label htmlFor="new_password">
                 <FormattedMessage id="label.new-password" defaultMessage="New password" />
               </label>
-              <Field name="new_password" type="password" />
-              <FormError name="new_password" />
+              <div>
+                <Field name="new_password" type="password" />
+                <FormError name="new_password" />
+              </div>
             </FormRow>
             <FormRow>
               <label htmlFor="confirm_password">
                 <FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" />
               </label>
-              <Field name="confirm_password" type="password" />
-              <FormError name="confirm_password" />
+              <div>
+                <Field name="confirm_password" type="password" />
+                <FormError name="confirm_password" />
+              </div>
             </FormRow>
             <FormButtons>
               <Button type="submit" variant="action">
diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js
index e1b4d9ca..145a342a 100644
--- a/components/forms/DeleteForm.js
+++ b/components/forms/DeleteForm.js
@@ -73,8 +73,10 @@ export default function DeleteForm({ values, onSave, onClose }) {
               />
             </p>
             <FormRow>
-              <Field name="confirmation" type="text" />
-              <FormError name="confirmation" />
+              <div>
+                <Field name="confirmation" type="text" />
+                <FormError name="confirmation" />
+              </div>
             </FormRow>
             <FormButtons>
               <Button
diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
index c89287a6..38b85125 100644
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@@ -71,15 +71,19 @@ export default function LoginForm() {
               <label htmlFor="username">
                 <FormattedMessage id="label.username" defaultMessage="Username" />
               </label>
-              <Field name="username" type="text" />
-              <FormError name="username" />
+              <div>
+                <Field name="username" type="text" />
+                <FormError name="username" />
+              </div>
             </FormRow>
             <FormRow>
               <label htmlFor="password">
                 <FormattedMessage id="label.password" defaultMessage="Password" />
               </label>
-              <Field name="password" type="password" />
-              <FormError name="password" />
+              <div>
+                <Field name="password" type="password" />
+                <FormError name="password" />
+              </div>
             </FormRow>
             <FormButtons>
               <Button type="submit" variant="action">
diff --git a/components/forms/WebsiteEditForm.js b/components/forms/WebsiteEditForm.js
index dc87999e..7be89f79 100644
--- a/components/forms/WebsiteEditForm.js
+++ b/components/forms/WebsiteEditForm.js
@@ -63,15 +63,19 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
               <label htmlFor="name">
                 <FormattedMessage id="label.name" defaultMessage="Name" />
               </label>
-              <Field name="name" type="text" />
-              <FormError name="name" />
+              <div>
+                <Field name="name" type="text" />
+                <FormError name="name" />
+              </div>
             </FormRow>
             <FormRow>
               <label htmlFor="domain">
                 <FormattedMessage id="label.domain" defaultMessage="Domain" />
               </label>
-              <Field name="domain" type="text" />
-              <FormError name="domain" />
+              <div>
+                <Field name="domain" type="text" />
+                <FormError name="domain" />
+              </div>
             </FormRow>
             <FormRow>
               <label></label>
diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css
index 90e1b8c2..1ae393bb 100644
--- a/components/layout/FormLayout.module.css
+++ b/components/layout/FormLayout.module.css
@@ -17,6 +17,10 @@
   line-height: 1.8;
 }
 
+.row > div {
+  position: relative;
+}
+
 .buttons {
   display: flex;
   justify-content: center;
@@ -33,9 +37,9 @@
   justify-content: center;
   align-items: center;
   top: 0;
-  left: 100%;
+  left: calc(100% + 16px);
   bottom: 0;
-  margin-left: 16px;
+  z-index: 1;
 }
 
 .msg {
@@ -68,3 +72,15 @@
   color: var(--gray50);
   background: var(--gray800);
 }
+
+@media only screen and (max-width: 576px) {
+  .error {
+    align-items: flex-start;
+    top: calc(100% + 7px);
+    left: 0;
+  }
+
+  .error:after {
+    left: 10px;
+  }
+}