Fix responsivity of modal on mobile

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>
   )