fix: add mobile design for details form

components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {

components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx

@@ -34,29 +34,31 @@ export default function JoinScandicFriendsCard({
   ]
 
   return (
-    <label className={styles.cardContainer}>
+    <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 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
@@ -103,6 +105,6 @@ export default function JoinScandicFriendsCard({
           }
         )}
       </Footnote>
-    </label>
+    </div>
   )
 }

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

@@ -4,7 +4,6 @@
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
   display: grid;
-  cursor: pointer;
   gap: var(--Spacing-x2);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   width: min(100%, 600px);
@@ -13,7 +12,7 @@
 .header {
   display: grid;
   gap: var(--Spacing-x-one-and-half);
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 1fr auto;
 }
 
 .checkBox {