From 5f7cfe3714e56219b4ff3ae847c9f458993e11f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 8 Apr 2021 16:05:31 +0200
Subject: [PATCH] fix modal-container targeting for Portal component

---
 packages/bbui/src/Modal/Modal.svelte        |  2 +-
 packages/bbui/src/Modal/ModalContent.svelte | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 96f6d04888..fe843fc1c3 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -37,7 +37,7 @@
 <svelte:window on:keydown={handleKey} />
 
 {#if visible}
-  <Portal target="modal-container">
+  <Portal target=".modal-container">
     <div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
       <div class="spectrum-Modal-wrapper">
         <div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 75ae764509..2b047fc4bb 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -28,11 +28,13 @@
   }
 </script>
 
-<div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
+<div class="spectrum-Dialog spectrum-Dialog--medium" role="dialog" tabindex="-1" aria-modal="true">
   <div class="spectrum-Dialog-grid">
     <h1 class="spectrum-Dialog-heading">{title}</h1>
-    <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
-    <section class="spectrum-Dialog-content">
+    <hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
+    
+    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
+    <section class="spectrum-Dialog-content content-grid">
       <slot />
     </section>
     {#if showCancelButton || showConfirmButton}
@@ -66,6 +68,16 @@
 
 
 <style>
+  .content-grid {
+    display: grid;
+    position: relative;
+    gap: var(--spacing-xl);
+    color: var(--ink);
+  }
+
+  h1 {
+    font-weight: normal;
+  }
   .close-icon {
     position: absolute;
     top: 15px;