Fix form position to maintain structure on bigger display and update CHANGELOG

Author: briangesteban

CHANGELOG.md

@@ -157,7 +157,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Updated husky script to avoid warning
 - Resolved incorrect meta tag rendering for nested routes
 - Prevent horizontal page scroll caused by overflowing long titles
-- Fix hero images' max-height to align with WDP mockup
+- Fixed hero images' max-height to align with WDP mockup
+- Fixed contact us form position to maintain structure on bigger displays
 
 ### Changed
 

components/ContactUs/ContactUsForm/ContactUsForm.module.scss

@@ -10,6 +10,7 @@
     max-width: 100%;
     width: 26rem;
     padding: 2rem 0;
+    margin-right: 6.5625rem;
   }
 }
 

components/decorations/Bracket/Bracket.module.scss

@@ -36,7 +36,7 @@
   }
 
   @include desktop-breakpoint-plus {
-    top: 45%;
+    top: 38%;
     right: 140%;
   }
 }

pages/contact.js

@@ -10,21 +10,23 @@ export default function ContactUs() {
   return (
     <>
       <div className={styles.contactUsContainer}>
-        <div className={styles.formAndDecorations}>
-          <Bracket className={bracketStyles.yellowBracket} />
-          <ContactUsFormSubscribe setMsg={setMessage} />
-          <img
-            className={styles.yellowColon}
-            src='/images/svg/yellow-colon.svg'
-            alt=''
-          />
-          <div className={styles.responseMessage}>
-            {message?.map((m, i) => (
-              <span key={i}>
-                {m}
-                <br />
-              </span>
-            ))}
+        <div className={styles.formWrapper}>
+          <div className={styles.formAndDecorations}>
+            <Bracket className={bracketStyles.yellowBracket} />
+            <ContactUsFormSubscribe setMsg={setMessage} />
+            <img
+              className={styles.yellowColon}
+              src='/images/svg/yellow-colon.svg'
+              alt=''
+            />
+            <div className={styles.responseMessage}>
+              {message?.map((m, i) => (
+                <span key={i}>
+                  {m}
+                  <br />
+                </span>
+              ))}
+            </div>
           </div>
         </div>
       </div>

styles/pages/contact.module.scss

@@ -17,20 +17,25 @@
   }
 }
 
+.formWrapper {
+  display: flex;
+  max-width: 98rem;
+  margin-inline: auto;
+}
+
 .formAndDecorations {
+  position: relative;
+  width: 100%;
+  margin: auto;
+
   @include tablet {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    position: absolute;
-    bottom: 48%;
-    right: 4%;
-    z-index: 11;
+    width: auto;
+    margin-top: -19rem;
+    margin-right: 2rem;
   }
 
   @include desktop {
-    bottom: 52%;
-    right: 8%;
+    margin: -25rem 5rem 0 auto;
   }
 }
 
@@ -46,7 +51,7 @@
   }
 
   @include desktop {
-    right: -15%;
+    right: -1rem;
   }
 }