From db953210b3df1e7b785b7fa525176932680019d5 Mon Sep 17 00:00:00 2001
From: SupunKavinda <supunkavinda1125@gmail.com>
Date: Tue, 2 Jan 2024 14:11:11 +0100
Subject: [PATCH] Modal overflow - align to top when large

---
 CHANGELOG.md                                  |  3 +
 package.json                                  |  2 +-
 .../ActionList/ActionListItem.svelte          |  2 +
 src/lib/components/Modal/Modal.svelte         | 27 +++++--
 src/routes/[[slug]]/docs/Modal.svelte         | 70 +++++++++++++++++++
 5 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e59afc7..f6890b88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 0.0.35 - 2024-01-02
+- Modal overflow - align to top when large
+
 ## 0.0.34 - 2024-01-02
 - var(--orange) color update
 - TextInput blur bug fixed
diff --git a/package.json b/package.json
index 51ae2e49..4d230e54 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
diff --git a/src/lib/components/ActionList/ActionListItem.svelte b/src/lib/components/ActionList/ActionListItem.svelte
index ff1407e4..c391e526 100644
--- a/src/lib/components/ActionList/ActionListItem.svelte
+++ b/src/lib/components/ActionList/ActionListItem.svelte
@@ -31,6 +31,8 @@
         }
     }}
     {...$$restProps}
+
+    on:click
 >
 
     {#if selection !== 'none'}
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index b7f992b3..a0ebee92 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -3,6 +3,7 @@
     import { IconX } from '@hyvor/icons';
     import IconButton from './../IconButton/IconButton.svelte';
 	import { scale } from 'svelte/transition';
+    import { onMount, tick } from "svelte";
 
     export let show = false;
     export let title = "";
@@ -10,6 +11,21 @@
     export let closeOnOutsideClick = true;
     export let closeOnEscape = true;
 
+    let wrapEl: HTMLDivElement;
+    let innerEl: HTMLDivElement;
+
+    async function setFlex() {
+        await tick();
+        if (!wrapEl || !innerEl) return;
+        if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+            wrapEl.style.alignItems = 'flex-start';
+        } else {
+            wrapEl.style.alignItems = 'center';
+        }
+    }
+
+    onMount(setFlex);
+    $: show, setFlex();
 
 </script>
 
@@ -21,7 +37,10 @@
 
 
 {#if show}
-    <div class="wrap">
+    <div 
+        class="wrap"
+        bind:this={wrapEl}
+    >
 
         <div 
             class="inner {size}"
@@ -30,6 +49,7 @@
                 callback: () => show = false
             }}
             in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
+            bind:this={innerEl}
         >
 
             <div class="header">
@@ -81,6 +101,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 30px;
+        overflow: auto;
     }
 
     .inner {
@@ -89,8 +111,6 @@
         box-shadow: var(--box-shadow);
         width: 650px;
         max-width: 100%;
-        max-height: 100%;
-        overflow: auto;
         position: relative;
     }
 
@@ -103,7 +123,6 @@
 
     .header {
         padding: 20px 25px;
-        border-bottom: 1px solid var(--box-border);
         display: flex;
         align-items: center;
     }
diff --git a/src/routes/[[slug]]/docs/Modal.svelte b/src/routes/[[slug]]/docs/Modal.svelte
index 722979dc..b037496f 100644
--- a/src/routes/[[slug]]/docs/Modal.svelte
+++ b/src/routes/[[slug]]/docs/Modal.svelte
@@ -18,6 +18,8 @@
 
     let show5 = false;
 
+    let show6 = false;
+
 </script>
 
 <h1>Modal</h1>
@@ -259,4 +261,72 @@
         <Button variant="invisible" on:click={() => show5 = false}>Close</Button>
     </div>
 
+</Modal>
+
+<h3 id="scrollable">
+    Scrollable Modal
+</h3>
+
+<p>
+    If a modal grows larger than the screen, it will be scrollable. The inner content will be aligned to the top of the modal.
+</p>
+
+<CodeResult style="display:flex;flex-direction:column;gap:6px;align-items:flex-start;">
+    <Button on:click={() => show6 = true}>
+        Scrollable Modal
+    </Button>
+</CodeResult>
+
+<Modal 
+    bind:show={show6}
+    title="Scrollable Modal"
+>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
 </Modal>
\ No newline at end of file