From f84c1db31fade75f951c92b6a0f82e6dacb26595 Mon Sep 17 00:00:00 2001
From: Yura Dupyn <2153100+omedusyo@users.noreply.github.com>
Date: Fri, 15 May 2026 17:20:17 +0200
Subject: [PATCH] Fix responsivity of modal on mobile

---
 src/ui/Picturarium.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/ui/Picturarium.tsx b/src/ui/Picturarium.tsx
index f208b81..3f66965 100644
--- a/src/ui/Picturarium.tsx
+++ b/src/ui/Picturarium.tsx
@@ -370,10 +370,15 @@ function Image({
   imageId,
   dimension,
   onClick,
+  displayDimension = dimension,
 }: {
   imageId: ImageId
   dimension: Dimension
   onClick?: () => void
+  displayDimension?: {
+    width: number | string
+    height: number | string
+  }
 }) {
   const [loaded, setLoaded] = useState(false)
 
@@ -381,8 +386,8 @@ function Image({
     <Box
       sx={{
         position: "relative",
-        width: dimension.width,
-        height: dimension.height,
+        width: displayDimension.width,
+        height: displayDimension.height,
       }}
     >
       {!loaded && (
@@ -403,8 +408,8 @@ function Image({
         sx={{
           position: "absolute",
           inset: 0,
-          width: dimension.width,
-          height: dimension.height,
+          width: "100%",
+          height: "100%",
           objectFit: "cover",
           cursor: onClick === undefined ? "default" : "pointer",
           opacity: loaded ? 1 : 0,
@@ -425,7 +430,7 @@ function ImageModal({ selectedImage }: { selectedImage: ImageId | undefined }) {
       }}
       maxWidth={false}
     >
-      <DialogContent sx={{ p: 0, overflow: "hidden" }}>
+      <DialogContent sx={{ p: 0 }}>
         {selectedImage !== undefined && <OpenImageModal imageId={selectedImage} />}
       </DialogContent>
     </Dialog>
@@ -460,7 +465,14 @@ function OpenImageModal({ imageId }: { imageId: ImageId }) {
   )
   return (
     <Box>
-      <Image imageId={imageId} dimension={Dimension.big} />
+      <Image
+        imageId={imageId}
+        dimension={Dimension.big}
+        displayDimension={{
+          width: "min(90vw, 720px)",
+          height: "min(65vh, 720px)",
+        }}
+      />
       <CaptionView caption={state.caption} />
     </Box>
   )