test

src/app.html

@@ -76,5 +76,6 @@
                 class="logo-dark"
                 alt="Appwrite Logo" />
         </div>
+        <button onclick="alert('Browser extension clicked!')" style="position: fixed; top: 50px; right: 50px; z-index: 100000; background-color: red; color: white; padding: 30px 60px; border: 3px solid yellow; border-radius: 8px; cursor: pointer; font-size: 24px; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.5); pointer-events: auto;">1PASSWORD TEST</button>
     </body>
 </html>

src/lib/components/account/sendVerificationEmailModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { invalidate, goto } from '$app/navigation';
-    import { Modal } from '$lib/components';
+    import { NonBlockingModal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -129,13 +129,13 @@
 </script>
 
 <div class="email-verification-scrim">
-    <Modal
+    <NonBlockingModal
         bind:show
         bind:error
         title="Verify your email address"
         {onSubmit}
         dismissible={false}
-        autoClose={false}>
+        size="m">
         <Card.Base variant="secondary" padding="s">
             <Layout.Stack gap="xxs">
                 <Typography.Text gap="m">
@@ -169,7 +169,7 @@
                 {emailSent ? 'Resend email' : 'Send email'}
             </Button>
         </svelte:fragment>
-    </Modal>
+    </NonBlockingModal>
 </div>
 
 <style>

src/lib/components/fakeModal.svelte

@@ -22,7 +22,7 @@
     onMount(async () => {});
 
     function handleBLur(event: MouseEvent) {
-        if (event.target === backdrop) {
+        if (event.target === backdrop && closable) {
             trackEvent(Click.ModalCloseClick, {
                 from: 'backdrop'
             });
@@ -36,7 +36,7 @@
     }
 
     function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && closable) {
             event.preventDefault();
             trackEvent(Click.ModalCloseClick, {
                 from: 'escape'

src/lib/components/index.ts

@@ -87,3 +87,4 @@ export { default as ExpirationInput } from './expirationInput.svelte';
 export { default as EstimatedCard } from './estimatedCard.svelte';
 export { default as SortButton, type SortDirection } from './sortButton.svelte';
 export { default as SendVerificationEmailModal } from './account/sendVerificationEmailModal.svelte';
+export { default as NonBlockingModal } from './nonBlockingModal.svelte';

src/lib/components/nonBlockingModal.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import FakeModal from './fakeModal.svelte';
+    import { Alert, Layout } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let error: string = null;
+    export let dismissible = true;
+    export let size: 's' | 'm' | 'l' = 'm';
+    export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
+        return;
+    };
+    export let title = '';
+    export let hideFooter = false;
+
+    let alert: HTMLElement;
+
+    $: if (error) {
+        alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    }
+</script>
+
+<FakeModal
+    bind:show
+    title={title}
+    onSubmit={onSubmit}
+    closable={dismissible}
+    size={(size === 's' ? 'small' : 'big') as 'small' | 'big'}>
+    <slot slot="description" name="description" />
+    {#if error}
+        <div bind:this={alert}>
+            <Alert.Inline
+                dismissible
+                status="warning"
+                on:dismiss={() => {
+                    error = null;
+                }}>
+                {error}
+            </Alert.Inline>
+        </div>
+    {/if}
+    <slot />
+    <svelte:fragment slot="footer">
+        {#if !hideFooter}
+            <Layout.Stack direction="row" justifyContent="flex-end">
+                <slot name="footer" />
+            </Layout.Stack>
+        {/if}
+    </svelte:fragment>
+</FakeModal>
+
+<style>
+    /* Make backdrop non-blocking while keeping dialog interactive */
+    :global(.payment-modal-backdrop) {
+        pointer-events: none;
+    }
+    :global(.payment-modal-backdrop .modal) {
+        pointer-events: auto;
+    }
+</style>
+
+