From 503fb6e4e0339a00fe1810d817115f7038cf65f1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 6 Feb 2018 09:09:47 -0800
Subject: [PATCH] change style of modal

---
 routes/_components/dialog/ConfirmationDialog.html |  9 +++++----
 routes/_components/dialog/ModalDialog.html        | 12 ++++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/routes/_components/dialog/ConfirmationDialog.html b/routes/_components/dialog/ConfirmationDialog.html
index 35bcfb7..64dd108 100644
--- a/routes/_components/dialog/ConfirmationDialog.html
+++ b/routes/_components/dialog/ConfirmationDialog.html
@@ -15,12 +15,13 @@
 </ModalDialog>
 <style>
   .confirmation-dialog-form-flex {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+    padding: 10px 20px;
   }
   .confirmation-dialog-form-flex button {
-    flex: 1;
-    min-width: 200px;
+    min-width: 125px;
   }
   .confirmation-dialog-form p {
     font-size: 1.3em;
diff --git a/routes/_components/dialog/ModalDialog.html b/routes/_components/dialog/ModalDialog.html
index faefb71..6e8cf1a 100644
--- a/routes/_components/dialog/ModalDialog.html
+++ b/routes/_components/dialog/ModalDialog.html
@@ -6,7 +6,9 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
-    <slot></slot>
+    <div class="modal-dialog-slot">
+      <slot></slot>
+    </div>
   </div>
 </div>
 <style>
@@ -29,13 +31,15 @@
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 0;
-    border: 3px solid var(--main-border);
+    border: 1px solid var(--main-border);
+    border-radius: 2px;
   }
   .modal-dialog-document {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    max-width: calc(100vw - 20px);
   }
   .close-dialog-button-wrapper {
     text-align: right;
@@ -53,6 +57,10 @@
     color: var(--button-primary-text);
   }
 
+  .modal-dialog-slot {
+    max-width: 100%;
+  }
+
   @media (max-width: 767px) {
     .close-dialog-button span {
       padding: 0 10px 4px;