diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index 6681072cd..8abc27eac 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@@ -248,10 +248,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       <div
         role='dialog'
         className={classNames({
-          'my-2 mx-auto relative pointer-events-none flex items-center': true,
+          'my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]': true,
           'p-4 md:p-0': type !== 'MEDIA',
         })}
-        style={{ minHeight: 'calc(100% - 3.5rem)' }}
       >
         {children}
       </div>
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 34e375acc..ed9a9912c 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -7,8 +7,8 @@
 }
 
 .media-modal {
-  width: 100%;
-  height: 100%;
+  // https://stackoverflow.com/a/8468131
+  @apply w-full h-full absolute inset-0;
 
   .audio-player.detailed,
   .extended-video-player {