fix: responsivity of fields and order of signup form

2024-11-18 15:07:23 +01:00
parent 9094b08345
commit d5c6b6809c
17 changed files with 264 additions and 262 deletions
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/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>
  )
 }
--- a/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/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;
+  }
+}