Tweak modal

src/partials/Modal.svelte

@@ -3,7 +3,7 @@
 
   export let onEscape = null
 
-  let root
+  let root, content
 </script>
 
 <svelte:body
@@ -13,27 +13,29 @@
     }
   }} />
 
-<div class="fixed inset-0 z-30 modal" bind:this={root}>
+<div class="fixed inset-0 z-30 modal bg-black/75" bind:this={root} transition:fade>
   <div
-    class="absolute inset-0 bg-black opacity-75"
+    class="modal-content overflow-auto h-full"
+    bind:this={content}
+    transition:fly={{y: 1000}}
     class:cursor-pointer={onEscape}
-    transition:fade
+    on:click={onEscape}>
-    on:click={onEscape} />
+    <div class="mt-12 min-h-full">
-  <div
+      <div class="absolute w-full h-full bg-dark mt-12" />
-    class="absolute inset-0 mt-24 sm:mt-28 modal-content"
+      {#if onEscape}
-    transition:fly={{y: 1000, opacity: 1}}>
+      <div class="flex w-full justify-end p-2 sticky top-0 z-10 pointer-events-none">
-    <div class="bg-dark border-t border-solid border-medium h-full w-full overflow-auto pb-10">
+        <div
-      <slot />
+          class="w-10 h-10 flex justify-center items-center bg-accent pointer-events-auto
-    </div>
+                 rounded-full cursor-pointer border border-solid border-medium">
-    {#if onEscape}
+          <i class="fa fa-times fa-lg" />
-    <div class="absolute top-0 flex w-full justify-end pr-2 -mt-8 pointer-events-none">
+        </div>
+      </div>
+      {/if}
       <div
-        class="pointer-events-auto w-10 h-10 flex justify-center items-center bg-accent
+        class="bg-dark border-t border-solid border-medium h-full w-full pb-10 cursor-auto"
-               rounded-full cursor-pointer border border-solid border-medium border-b-0"
+        on:click|stopPropagation>
-        on:click={onEscape}>
+        <slot />
-        <i class="fa fa-times fa-lg" />
       </div>
     </div>
-    {/if}
   </div>
 </div>