Merge pull request #2660 from appwrite/fix-modal-overflows

Author: ItzNotABug

src/lib/components/drop.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { createPopper, type Instance } from '@popperjs/core';
-    import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+    import { createEventDispatcher, onDestroy, onMount, hasContext } from 'svelte';
 
     export let show = false;
     export let noArrow = false;
@@ -17,6 +17,10 @@
     export let display = 'block';
     export let arrowSize = 10;
     export let isPopover = false;
+    export let portal = false;
+
+    const inModal = hasContext('dialog-group');
+    const shouldPortalTooltip = portal || inModal;
 
     const dispatch = createEventDispatcher<{
         blur: undefined;
@@ -27,6 +31,22 @@
     let arrow: HTMLDivElement;
     let instance: Instance;
 
+    function portalAction(node: HTMLElement) {
+        if (!shouldPortalTooltip) return;
+
+        const bodyElement = document.body;
+        const target = inModal ? node.closest('dialog[open]') || bodyElement : bodyElement;
+        target.appendChild(node);
+
+        return {
+            destroy() {
+                if (node.parentElement === target) {
+                    target.removeChild(node);
+                }
+            }
+        };
+    }
+
     onMount(() => {
         instance = createPopper(element, tooltip, {
             placement,
@@ -116,6 +136,7 @@
 </div>
 
 <div
+    use:portalAction
     class="drop-tooltip"
     bind:this={tooltip}
     class:u-width-full-line={fullWidth}

src/lib/components/dropList.svelte

@@ -18,6 +18,7 @@
     export let paddingInline: string = undefined;
     export let resetListPadding: boolean = false;
     export let gap: string = undefined;
+    export let portal = false;
     let classes: string = '';
     export { classes as class };
 </script>
@@ -31,6 +32,7 @@
     {fullWidth}
     {wrapperFullWidth}
     {fixed}
+    {portal}
     on:blur>
     <slot />
     <svelte:fragment slot="list">

src/lib/components/modal.svelte

@@ -57,6 +57,5 @@
     /* temporary fix to modal width */
     :global(dialog section) {
         max-width: 100% !important;
-        overflow: visible !important;
     }
 </style>