From dda37a4969497c88fa38ad066a8326f18b16e142 Mon Sep 17 00:00:00 2001
From: Santhosh Janardhanan <santhoshj@gmail.com>
Date: Tue, 10 Feb 2026 23:55:50 -0500
Subject: [PATCH] mobile view issue

---
 site/src/styles/global.css | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index 79fa913..4050e59 100644
--- a/site/src/styles/global.css
+++ b/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;
   }