fix(SW-360): remove container queries to fix stacking context bug affecting dropdowns in signup

components/Forms/Signup/index.tsx

@@ -68,10 +68,11 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
       password: "",
       termsAccepted: false,
     },
-    mode: "onBlur",
+    mode: "all",
     criteriaMode: "all",
     resolver: zodResolver(signUpSchema),
     reValidateMode: "onChange",
+    shouldFocusError: true,
   })
 
   async function onSubmit(data: SignUpSchema) {

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

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

components/TempDesignSystem/Form/Phone/index.tsx

@@ -78,8 +78,7 @@ export default function Phone({
   }
 
   return (
-    <div className={`${styles.wrapper} ${className}`}>
+    <div className={`${styles.phone} ${className}`}>
-      <div className={styles.phone}>
       <CountrySelector
         disabled={readOnly}
         dropdownArrowClassName={styles.arrow}
@@ -141,6 +140,5 @@ export default function Phone({
         <ErrorMessage errors={formState.errors} name={field.name} />
       </TextField>
     </div>
-    </div>
   )
 }

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

@@ -1,11 +1,7 @@
-.wrapper {
-  container-name: phoneContainer;
-  container-type: inline-size;
-}
 .phone {
   display: grid;
+  grid-template-columns: 1fr;
   gap: var(--Spacing-x2);
-  grid-template-columns: minmax(124px, 164px) 1fr;
 
   --react-international-phone-background-color: var(--Main-Grey-White);
   --react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -28,6 +24,12 @@
   );
 }
 
+@media (min-width: 385px) {
+  .phone {
+    grid-template-columns: minmax(124px, 164px) 1fr;
+  }
+}
+
 .phone:has(.input:active, .input:focus) {
   --react-international-phone-border-color: var(--Scandic-Blue-90);
 }
@@ -104,10 +106,3 @@
   justify-self: flex-start;
   padding: 0;
 }
-
-@container phoneContainer (max-width: 350px) {
-  .phone {
-    display: flex;
-    flex-direction: column;
-  }
-}