From 87b279d8eee961b5a9653886b5c5ea727099c25a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jun 2023 11:49:36 -0500
Subject: [PATCH 1/2] MediaModal: hide fullscreen button on mobile

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

diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 1348e1e962..e59b904990 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -268,7 +268,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   src={isFullScreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                   theme='dark'
-                  className='!p-1.5 hover:scale-105 hover:bg-gray-900'
+                  className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
                   iconClassName='h-5 w-5'
                   onClick={() => setIsFullScreen(!isFullScreen)}
                 />

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 2/2] 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 e59b904990..959c433fdb 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,