Merged in feat/loy-513-update-edit-profile-button-positions (pull request #3447)

feat(LOY-513): Update button positions and simplify css

* Update button positions and simplify css


Approved-by: Matilda Landström

apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css

@@ -1,3 +1,13 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--Space-x4);
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .password,
 .user {
   align-self: flex-start;
@@ -7,7 +17,7 @@
   container-type: inline-size;
 }
 
-.container {
+.sharedRow {
   display: grid;
   gap: var(--Space-x2);
   grid-template-columns: minmax(100px, 164px) 1fr;
@@ -20,7 +30,7 @@
 }
 
 @container addressContainer (max-width: 350px) {
-  .container {
+  .sharedRow {
     grid-template-columns: 1fr;
   }
 }

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -31,7 +31,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
   const languageOptions = getLocalizedLanguageOptions(lang)
 
   return (
-    <>
+    <div className={styles.container}>
       <section className={styles.user}>
         <header>
           <Typography variant="Body/Paragraph/mdBold">
@@ -82,7 +82,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           })}
           name="address.city"
         />
-        <div className={styles.container}>
+        <div className={styles.sharedRow}>
           <FormInput
             data-hj-suppress
             label={intl.formatMessage({
@@ -183,6 +183,6 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           errorFormatter={formatFormErrorMessage}
         />
       </section>
-    </>
+    </div>
   )
 }