mobile view issue

site/src/styles/global.css

@@ -1002,6 +1002,11 @@ button.card {
 /* --- Media Modal --- */
 
 #media-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
   max-width: 800px;
   width: calc(100vw - 48px);
   max-height: 90vh;
@@ -1024,9 +1029,11 @@ button.card {
 .media-modal-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  max-height: min(90vh, calc(100dvh - 32px));
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 .media-modal-header {
@@ -1302,10 +1309,14 @@ button.card {
 @media (max-width: 760px) {
   #media-modal {
     max-width: 96vw;
-    max-height: 94vh;
+    max-height: min(94vh, calc(100dvh - 24px));
     width: 96vw;
   }
 
+  .media-modal-content {
+    max-height: min(94vh, calc(100dvh - 24px));
+  }
+
   .media-modal-header {
     padding: 16px 20px;
   }