From 7fe5c0b8edea90dd0f6ef68501f04c4bcff2ecca Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Thu, 23 Feb 2023 10:32:10 +0100
Subject: [PATCH] Try to fix fullscreen on macos part 2

---
 .../ImageCardContent.module.css               |  0
 .../ResourceCardContent/ImageCardContent.tsx  | 67 +++++++------------
 2 files changed, 24 insertions(+), 43 deletions(-)
 create mode 100644 site/components/common/Room/ResourceCardContent/ImageCardContent.module.css

diff --git a/site/components/common/Room/ResourceCardContent/ImageCardContent.module.css b/site/components/common/Room/ResourceCardContent/ImageCardContent.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx b/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
index eae3c5315..ddfe26757 100644
--- a/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
+++ b/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
@@ -1,4 +1,5 @@
 import { Box, Stack, Image, Text } from "@chakra-ui/react";
+import "./ImageCardContent.module.css"
 import screenfull from "screenfull";
 
 export default function ImageCardContent(props: {
@@ -9,50 +10,30 @@ export default function ImageCardContent(props: {
 
     return (
         <>
-          <style jsx>{`
-            *|*:fullscreen:not(:root) {
-              position: fixed !important;
-              top: 0 !important;
-              left: 0 !important;
-              right: 0 !important;
-              bottom: 0 !important;
-              width: 100% !important;
-              height: 100% !important;
-              margin: 0 !important;
-              min-width: 0 !important;
-              max-width: none !important;
-              min-height: 0 !important;
-              max-height: none !important;
-              box-sizing: border-box !important;
-              object-fit: contain;
-              transform: none !important;
-            }
-            `}
-          </style>
-            <Box
-              className={props.style.imageContainer}
-              w={'full'}
-              >
-                <Image 
-                  objectFit={"cover"} 
-                  margin={"auto"}
-                  cursor={'pointer'}
-                  onClick={() => openFullScreen('resource-image')} 
-                  id='resource-image' 
-                  alt='' 
-                  src={props.resourcePath} />
-            </Box>
+          <Box
+            className={props.style.imageContainer}
+            w={'full'}
+            >
+              <Image 
+                objectFit={"cover"} 
+                margin={"auto"}
+                cursor={'pointer'}
+                onClick={() => openFullScreen('resource-image')} 
+                id='resource-image' 
+                alt='' 
+                src={props.resourcePath} />
+          </Box>
+          
+          <Box 
+            p={5}
+            className={props.style.captionContainer}>
             
-            <Box 
-              p={5}
-              className={props.style.captionContainer}>
-              
-              <Stack align={'center'}>
-                <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
-                  {props.resourceCaption}
-                </Text>
-              </Stack>
-            </Box>
+            <Stack align={'center'}>
+              <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                {props.resourceCaption}
+              </Text>
+            </Stack>
+          </Box>
         </>
     )
 };