fix img preview dialog

scss/_dialog.scss

@@ -6,18 +6,21 @@
   top: 0;
   left: 0;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
   background-color: rgba(0, 0, 0, 0.5);
 
   .dialogContent {
-    max-height: 80%;
-    max-width: 80%;
+    position:relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-height: max-content;
+    max-width: max-content;
     background-color: white;
     border: 10px solid rgb(86, 86, 86);
     border-radius: 10px;
+    display: flex;
+    width: 80%;
+    height: 80%;
 
     iframe {
       width: 100%;
@@ -27,12 +30,9 @@
   }
 
   .imageDialog{
-    height: auto;
-    width: auto;
     img {
-      display: block;
-      width: 100%;
-      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
     }
   }
 }

ts/dialog.ts

@@ -15,7 +15,7 @@ function createDialogHTML(html:string, customClasses = "") {
 
     dialog.innerHTML = `
     <div class="dialogContent ${customClasses}">
-    <a class="dialogClose"></a>
+    <!-- <a class="dialogClose"></a> -->
         ${html}
     </div>`;