From fdcf2bc46b538e75ae0ad3671db685a45a066ef1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 13 Apr 2018 09:46:47 -0700
Subject: [PATCH] fix blurry modal dialog on chrome/safari (#101)

Fixes #71
---
 .../dialog/components/ModalDialog.html        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/routes/_components/dialog/components/ModalDialog.html b/routes/_components/dialog/components/ModalDialog.html
index 8702d215..71d48a50 100644
--- a/routes/_components/dialog/components/ModalDialog.html
+++ b/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;