reposition modal close button

styles/components/_modal.scss

@@ -29,6 +29,7 @@
       flex-grow: 1;
       overflow-y: auto;
       max-width: 80rem;
+      position: relative;
 
       @include media($medium-screen) {
         padding: $gap * 4;
@@ -39,9 +40,24 @@
         @include h3;
       }
 
-      :first-child {
+      > :first-child {
         margin-top: 0;
       }
+
+      .modal__dismiss {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 8rem;
+      }
+    }
+  }
+
+  &.modal--dismissable {
+    .modal__body {
+      > :first-child {
+        margin-right: 8rem;
+      }
     }
   }
 }

templates/components/modal.html

@@ -2,8 +2,10 @@
 
 {% macro Modal(name, dismissable=False) -%}
 <div v-if='modals.{{name}} === true' v-cloak>
-    <div class='modal'>
+    <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
       <div class='modal__dialog' role='dialog' aria-modal='true'>
+        <div class='modal__body'>
+            {{ caller() }}
 
             {% if dismissable %}
               <button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
@@ -11,9 +13,6 @@
                 <span>Close</span>
               </button>
             {% endif %}
-
-        <div class='modal__body'>
-            {{ caller() }}
         </div>
       </div>
     </div>