[Glitch] Fix Wrapstodon modal scrolling not working on iOS

Port 4323963053 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/annual_report/index.module.scss

@@ -10,19 +10,17 @@ $mobile-breakpoint: 540px;
 }
 
 .modalWrapper {
-  position: absolute;
-  inset: 0;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
   padding: 40px;
   overflow-y: auto;
-  pointer-events: none;
   scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
 
   @media (width < $mobile-breakpoint) {
-    padding-top: 0;
-    padding-inline: 0;
+    padding: 0;
   }
 
   .loading-indicator .circular-progress {

app/javascript/flavours/glitch/features/annual_report/modal.tsx

@@ -1,7 +1,10 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import classNames from 'classnames';
 
+import { closeModal } from '@/flavours/glitch/actions/modal';
+import { useAppDispatch } from '@/flavours/glitch/store';
+
 import { AnnualReport } from '.';
 import styles from './index.module.scss';
 
@@ -12,13 +15,24 @@ const AnnualReportModal: React.FC<{
     onChangeBackgroundColor('var(--color-bg-media-base)');
   }, [onChangeBackgroundColor]);
 
+  const dispatch = useAppDispatch();
+  const handleCloseModal = useCallback(() => {
+    dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
+  }, [dispatch]);
+
   return (
+    // It's fine not to provide a keyboard handler here since there is a global
+    // [Esc] key listener that will close open modals.
+    // This onClick handler is needed since the modalWrapper styles overlap the
+    // default modal backdrop, preventing clicks to pass through.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       className={classNames(
         'modal-root__modal',
         styles.modalWrapper,
         'theme-dark',
       )}
+      onClick={handleCloseModal}
     >
       <AnnualReport context='modal' />
     </div>