fix: responsivity of fields and order of signup form

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -66,7 +66,7 @@ export default function SectionAccordion({
   const textColor =
     isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
-    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
+    <div className={styles.main} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (
@@ -74,31 +74,27 @@ export default function SectionAccordion({
           ) : null}
         </div>
       </div>
-      <div className={styles.main}>
-        <header>
-          <button onClick={onModify} className={styles.modifyButton}>
-            <Footnote
-              className={styles.title}
-              asChild
-              textTransform="uppercase"
-              type="label"
-              color={textColor}
-            >
-              <h2>{header}</h2>
-            </Footnote>
-            <Subtitle className={styles.selection} type="two" color={textColor}>
-              {title}
-            </Subtitle>
+      <header className={styles.header}>
+        <button onClick={onModify} className={styles.modifyButton}>
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color={textColor}
+          >
+            <h2>{header}</h2>
+          </Footnote>
+          <Subtitle className={styles.selection} type="two" color={textColor}>
+            {title}
+          </Subtitle>
 
-            {isComplete && !isOpen && (
-              <ChevronDownIcon className={styles.button} color="burgundy" />
-            )}
-          </button>
-        </header>
-        <div className={styles.content}>
-          <div className={styles.contentWrapper}>{children}</div>
-        </div>
-      </div>
-    </section>
+          {isComplete && !isOpen && (
+            <ChevronDownIcon className={styles.button} color="burgundy" />
+          )}
+        </button>
+      </header>
+      <div className={styles.content}>{children}</div>
+    </div>
   )
 }

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -1,15 +1,25 @@
-.wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: var(--Spacing-x-one-and-half);
+.main {
+  gap: var(--Spacing-x3);
+  width: 100%;
   padding-top: var(--Spacing-x3);
+  transition: 0.4s ease-out;
+
+  display: grid;
+  grid-template-areas: "circle header" "content content";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 2.4em 0fr;
+
+  column-gap: var(--Spacing-x-one-and-half);
 }
 
-.wrapper:last-child .main {
+.main:last-child .main {
   border-bottom: none;
 }
 
+.header {
+  grid-area: header;
+}
+
 .modifyButton {
   display: grid;
   grid-template-areas: "title button" "selection button";
@@ -17,6 +27,7 @@
   background-color: transparent;
   border: none;
   width: 100%;
+  padding: 0;
 }
 
 .title {
@@ -29,15 +40,6 @@
   justify-self: flex-end;
 }
 
-.main {
-  display: grid;
-  width: 100%;
-  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  padding-bottom: var(--Spacing-x3);
-  transition: 0.4s ease-out;
-  grid-template-rows: 2em 0fr;
-}
-
 .selection {
   font-weight: 450;
   font-size: var(--typography-Title-4-fontSize);
@@ -46,6 +48,7 @@
 
 .iconWrapper {
   position: relative;
+  grid-area: circle;
 }
 
 .circle {
@@ -63,42 +66,42 @@
   background-color: var(--UI-Input-Controls-Fill-Selected);
 }
 
-.wrapper[data-open="true"] .circle[data-checked="false"] {
+.main[data-open="true"] .circle[data-checked="false"] {
   background-color: var(--UI-Text-Placeholder);
 }
 
-.wrapper[data-open="false"] .circle[data-checked="false"] {
+.main[data-open="false"] .circle[data-checked="false"] {
   background-color: var(--Base-Surface-Subtle-Hover);
 }
 
-.wrapper[data-open="true"] .main {
-  grid-template-rows: 2em 1fr;
+.main[data-open="true"] {
+  grid-template-rows: 2.4em 1fr;
+  gap: var(--Spacing-x3);
 }
 
 .content {
   overflow: hidden;
+  grid-area: content;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }
 
-.contentWrapper {
-  padding-top: var(--Spacing-x3);
-}
-
-@media screen and (min-width: 1367px) {
-  .wrapper {
+@media screen and (min-width: 768px) {
+  .main {
     gap: var(--Spacing-x3);
+    grid-template-areas: "circle header" "circle content";
   }
 
   .iconWrapper {
     top: var(--Spacing-x1);
   }
 
-  .wrapper:not(:last-child)::after {
+  .main:not(:last-child) .iconWrapper::after {
     position: absolute;
     left: 12px;
-    bottom: 0;
-    top: var(--Spacing-x7);
-    height: 100%;
+    bottom: calc(0px - var(--Spacing-x7));
+    top: 24px;
+
     content: "";
     border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   }
-}
+}