change style of modal

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;

routes/_components/dialog/ModalDialog.html

@@ -6,9 +6,11 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
+    <div class="modal-dialog-slot">
       <slot></slot>
     </div>
   </div>
+</div>
 <style>
   :global(#modal-dialog[aria-hidden='true']) {
     display: none;
@@ -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;