Merge pull request #19756 from mozilla/FXA-12473

fix(mfa): fix UI issue with MFA modal on mobile

Author: MagentaManifold

packages/fxa-settings/src/components/Settings/Modal/index.stories.tsx

@@ -22,7 +22,7 @@ const ModalToggle = ({ children }: ModalToggleProps) => {
   const [modalRevealed, showModal, hideModal] = useBooleanState(true);
   const onClick = useCallback(
     (ev: React.MouseEvent) => {
-      ev.preventDefault();
+      ev.stopPropagation();
       showModal();
     },
     [showModal]
@@ -85,6 +85,26 @@ export const WithConfirmButton = () => (
   </ModalToggle>
 );
 
+export const WithLongContent = () => (
+  <ModalToggle>
+    {({ modalRevealed, hideModal }) =>
+      modalRevealed && (
+        <Modal
+          headerId="some-id"
+          descId="some-description"
+          onConfirm={hideModal as () => void}
+          onDismiss={hideModal}
+        >
+          <h2>This is a modal with long content.</h2>
+          {Array.from({ length: 42 }, (_, i) => (
+            <p key={i}>Scroll down to see more</p>
+          ))}
+        </Modal>
+      )
+    }
+  </ModalToggle>
+);
+
 export const WithConfirmAndNoCancelButton = () => (
   <ModalToggle>
     {({ modalRevealed, hideModal }) =>

packages/fxa-settings/src/components/Settings/Modal/index.tsx

@@ -61,12 +61,12 @@ export const Modal = ({
     <Portal id="modal">
       <div
         data-testid={testid}
-        className="flex flex-col justify-center fixed inset-0 z-50 w-full p-2 h-full bg-black/75"
+        className="flex fixed inset-0 z-50 w-full p-2 bg-black/75 h-dvh overflow-y-auto overscroll-contain"
       >
         <div
           data-testid="modal-content-container"
           className={classNames(
-            'max-w-120 bg-white mx-auto rounded-xl border border-transparent overflow-y-auto',
+            'max-w-120 bg-white m-auto rounded-xl border border-transparent',
             className
           )}
           ref={modalInsideRef}