fix blurry modal dialog on chrome/safari (#101)

Fixes #71

routes/_components/dialog/components/ModalDialog.html

@@ -28,9 +28,21 @@
   :global(.modal-dialog[aria-hidden='true']) {
     display: none;
   }
-  .modal-dialog-backdrop {
+  :global(.modal-dialog) {
     position: fixed;
     z-index: 10000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .modal-dialog-backdrop {
+    position: fixed;
+    z-index: 10010;
     left: 0;
     right: 0;
     bottom: 0;
@@ -41,12 +53,7 @@
     transition: opacity 0.2s linear;
   }
   .modal-dialog-contents {
-    z-index: 10010;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    -webkit-font-smoothing: antialiased; /* fix for transform:translate causing blurry text in Chrome/Safari */
+    z-index: 10020;
     padding: 0;
     border: 1px solid var(--main-border);
     border-radius: 2px;