From 0d8317145d18272c77b325dd67bd0dd860e788d9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jun 2023 12:52:37 -0500
Subject: [PATCH] MediaModal: make clicking the background close the modal
 Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1434

---
 app/soapbox/features/ui/components/modals/media-modal.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index e59b90499..959c433fd 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -229,6 +229,12 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     }
   }
 
+  const handleClickOutside: React.MouseEventHandler<HTMLElement> = (e) => {
+    if ((e.target as HTMLElement).tagName === 'DIV') {
+      onClose();
+    }
+  };
+
   return (
     <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
       <div
@@ -236,6 +242,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
         role='presentation'
       >
         <Stack
+          onClick={handleClickOutside}
           className={
             clsx('fixed inset-0 h-full grow transition-all', {
               'xl:pr-96': !isFullScreen,