fix: responsivity of fields and order of signup form

components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css

@@ -9,6 +9,7 @@
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   transition: all 200ms ease;
   width: min(100%, 600px);
+  height: 100%;
 }
 
 .label:hover {

components/TempDesignSystem/Form/Date/date.module.css

@@ -1,4 +1,8 @@
 /* Leaving, will most likely get deleted */
+.datePicker {
+  container-name: datePickerContainer;
+  container-type: inline-size;
+}
 .container {
   display: grid;
   gap: var(--Spacing-x2);
@@ -27,3 +31,10 @@
 .year.invalid > div > div {
   border-color: var(--Scandic-Red-60);
 }
+
+@container datePickerContainer (max-width: 350px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}

components/TempDesignSystem/Form/Date/index.tsx

@@ -115,6 +115,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
       ref={field.ref}
       value={dateValue}
       data-testid={name}
+      className={styles.datePicker}
     >
       <Group>
         <DateInput className={styles.container}>

components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx

@@ -35,43 +35,41 @@ export default function JoinScandicFriendsCard({
 
   return (
     <div className={styles.cardContainer}>
-      <header className={styles.header}>
-        <Checkbox name={name} className={styles.checkBox}>
-          <div>
-            <Caption type="label" textTransform="uppercase" color="red">
-              {intl.formatMessage(
-                {
-                  id: "Only pay {amount} {currency}",
-                },
-                {
-                  amount: intl.formatNumber(difference.price),
-                  currency: difference.currency,
-                }
-              )}
-            </Caption>
-            <Caption
-              type="label"
-              textTransform="uppercase"
-              color="uiTextHighContrast"
-            >
-              {intl.formatMessage({ id: "Join Scandic Friends" })}
-            </Caption>
-          </div>
-        </Checkbox>
-
-        <Footnote color="uiTextHighContrast">
-          {intl.formatMessage({ id: "Already a friend?" })}{" "}
-          <LoginButton
-            color="burgundy"
-            position="enter details"
-            trackingId="join-scandic-friends-enter-details"
-            variant="breadcrumb"
-            target="_blank"
+      <Checkbox name={name} className={styles.checkBox}>
+        <div>
+          <Caption type="label" textTransform="uppercase" color="red">
+            {intl.formatMessage(
+              {
+                id: "Only pay {amount} {currency}",
+              },
+              {
+                amount: intl.formatNumber(difference.price),
+                currency: difference.currency,
+              }
+            )}
+          </Caption>
+          <Caption
+            type="label"
+            textTransform="uppercase"
+            color="uiTextHighContrast"
           >
-            {intl.formatMessage({ id: "Log in" })}
-          </LoginButton>
-        </Footnote>
-      </header>
+            {intl.formatMessage({ id: "Join Scandic Friends" })}
+          </Caption>
+        </div>
+      </Checkbox>
+
+      <Footnote color="uiTextHighContrast" className={styles.login}>
+        {intl.formatMessage({ id: "Already a friend?" })}{" "}
+        <LoginButton
+          color="burgundy"
+          position="enter details"
+          trackingId="join-scandic-friends-enter-details"
+          variant="breadcrumb"
+          target="_blank"
+        >
+          {intl.formatMessage({ id: "Log in" })}
+        </LoginButton>
+      </Footnote>
 
       <div className={styles.list}>
         {list.map((item) => (
@@ -84,7 +82,7 @@ export default function JoinScandicFriendsCard({
           </Caption>
         ))}
       </div>
-      <Footnote color="uiTextPlaceholder">
+      <Footnote color="uiTextPlaceholder" className={styles.terms}>
         {intl.formatMessage<React.ReactNode>(
           {
             id: "signup.terms",

components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -4,26 +4,52 @@
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x-one-and-half);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  grid-template-areas:
+    "checkbox"
+    "list"
+    "login"
+    "terms";
   width: min(100%, 600px);
 }
 
-.header {
-  display: grid;
-  gap: var(--Spacing-x-one-and-half);
-  grid-template-columns: 1fr auto;
+.login {
+  grid-area: login;
 }
 
 .checkBox {
   align-self: center;
+  grid-area: checkbox;
 }
 
 .list {
-  display: flex;
+  display: grid;
+  grid-area: list;
   gap: var(--Spacing-x1);
 }
 
 .listItem {
   display: flex;
 }
+
+.terms {
+  border-top: 1px solid var(--Base-Border-Normal);
+  grid-area: terms;
+  padding-top: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .cardContainer {
+    grid-template-columns: 1fr auto;
+    gap: var(--Spacing-x2);
+    grid-template-areas:
+      "checkbox login"
+      "list list"
+      "terms terms";
+  }
+  .list {
+    display: flex;
+    gap: var(--Spacing-x1);
+  }
+}

components/TempDesignSystem/Form/Phone/index.tsx

@@ -78,67 +78,69 @@ export default function Phone({
   }
 
   return (
-    <div className={`${styles.phone} ${className}`}>
-      <CountrySelector
-        disabled={readOnly}
-        dropdownArrowClassName={styles.arrow}
-        flagClassName={styles.flag}
-        onSelect={handleSelectCountry}
-        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
-        selectedCountry={country.iso2}
-        renderButtonWrapper={(props) => (
-          <button
-            {...props.rootProps}
-            className={styles.select}
-            tabIndex={0}
-            type="button"
-            data-testid="country-selector"
-          >
-            <Label required={!!registerOptions.required} size="small">
-              {intl.formatMessage({ id: "Country code" })}
-            </Label>
-            <span className={styles.selectContainer}>
-              {props.children}
-              <Body asChild fontOnly>
-                <DialCodePreview
-                  className={styles.dialCode}
-                  dialCode={country.dialCode}
-                  prefix="+"
+    <div className={`${styles.wrapper} ${className}`}>
+      <div className={styles.phone}>
+        <CountrySelector
+          disabled={readOnly}
+          dropdownArrowClassName={styles.arrow}
+          flagClassName={styles.flag}
+          onSelect={handleSelectCountry}
+          preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+          selectedCountry={country.iso2}
+          renderButtonWrapper={(props) => (
+            <button
+              {...props.rootProps}
+              className={styles.select}
+              tabIndex={0}
+              type="button"
+              data-testid="country-selector"
+            >
+              <Label required={!!registerOptions.required} size="small">
+                {intl.formatMessage({ id: "Country code" })}
+              </Label>
+              <span className={styles.selectContainer}>
+                {props.children}
+                <Body asChild fontOnly>
+                  <DialCodePreview
+                    className={styles.dialCode}
+                    dialCode={country.dialCode}
+                    prefix="+"
+                  />
+                </Body>
+                <ChevronDownIcon
+                  className={styles.chevron}
+                  color="grey80"
+                  height={18}
+                  width={18}
                 />
-              </Body>
-              <ChevronDownIcon
-                className={styles.chevron}
-                color="grey80"
-                height={18}
-                width={18}
-              />
-            </span>
-          </button>
-        )}
-      />
-      <TextField
-        aria-label={ariaLabel}
-        defaultValue={field.value}
-        isDisabled={disabled ?? field.disabled}
-        isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
-        isReadOnly={readOnly}
-        name={field.name}
-        type="tel"
-      >
-        <AriaInputWithLabel
-          {...field}
-          id={field.name}
-          label={label}
-          onChange={handleChange}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          required={!!registerOptions.required}
-          type="tel"
-          value={inputValue}
+              </span>
+            </button>
+          )}
         />
-        <ErrorMessage errors={formState.errors} name={field.name} />
-      </TextField>
+        <TextField
+          aria-label={ariaLabel}
+          defaultValue={field.value}
+          isDisabled={disabled ?? field.disabled}
+          isInvalid={fieldState.invalid}
+          isRequired={!!registerOptions?.required}
+          isReadOnly={readOnly}
+          name={field.name}
+          type="tel"
+        >
+          <AriaInputWithLabel
+            {...field}
+            id={field.name}
+            label={label}
+            onChange={handleChange}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            required={!!registerOptions.required}
+            type="tel"
+            value={inputValue}
+          />
+          <ErrorMessage errors={formState.errors} name={field.name} />
+        </TextField>
+      </div>
     </div>
   )
 }

components/TempDesignSystem/Form/Phone/phone.module.css

@@ -1,3 +1,7 @@
+.wrapper {
+  container-name: phoneContainer;
+  container-type: inline-size;
+}
 .phone {
   display: grid;
   gap: var(--Spacing-x2);
@@ -100,3 +104,10 @@
   justify-self: flex-start;
   padding: 0;
 }
+
+@container phoneContainer (max-width: 350px) {
+  .phone {
+    display: flex;
+    flex-direction: column;
+  }
+}