From 8f9c726e0d337d4a43171a0f63d2468f6a75287d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 17 Jul 2025 17:52:37 +0530
Subject: [PATCH 1/5] feat: replaced pink 1 with pink2

---
 .../document-[document]/settings/+page.svelte | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
index fd24eb6488..abfab7dee8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Alert } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
@@ -14,6 +14,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { collection } from '../../store';
     import { page } from '$app/stores';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
     let showDelete = false;
     let permissions = $doc?.$permissions;
@@ -85,27 +86,23 @@
         <svelte:fragment slot="aside">
             {#if $collection.documentSecurity}
                 {#if showPermissionAlert}
-                    <Alert type="info" dismissible on:dismiss={() => (showPermissionAlert = false)}>
-                        <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-                        <p class="text">
-                            Users will be able to access this document if they have been granted <b
-                                >either document or collection permissions.
-                            </b>
-                        </p>
-                    </Alert>
+                    <Alert.Inline
+                        status="info"
+                        title="Document security is enabled"
+                        dismissible
+                        on:dismiss={() => (showPermissionAlert = false)}>
+                        Users will be able to access this document if they have been granted <b
+                            >either document or collection permissions.</b>
+                    </Alert.Inline>
                 {/if}
                 {#if permissions}
                     <Permissions bind:permissions />
                 {/if}
             {:else}
-                <Alert type="info">
-                    <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
-                    <p class="text">
-                        If you want to assign document permissions. Go to Collection settings and
-                        enable document security. Otherwise, only collection permissions will be
-                        used.
-                    </p>
-                </Alert>
+                <Alert.Inline status="info" title="Document security is disabled">
+                    If you want to assign document permissions. Go to Collection settings and enable
+                    document security. Otherwise, only collection permissions will be used.
+                </Alert.Inline>
             {/if}
         </svelte:fragment>
 

From 2df7aae08d26678ef3a493b7bc801ea2cfa7602e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:27:00 +0530
Subject: [PATCH 2/5] fix: made some more components replaced with pink2

---
 src/lib/components/fakeModal.svelte                   |  8 ++++----
 src/lib/layout/containerHeader.svelte                 | 11 ++++++-----
 .../settings/deleteOrganizationEstimation.svelte      |  6 +++---
 .../collection-[collection]/table.svelte              |  6 ++++--
 .../function-[function]/settings/+page.svelte         | 10 +++++-----
 .../sites/create-site/importSiteVariablesModal.svelte |  6 +++---
 .../bucket-[bucket]/settings/updateMaxFileSize.svelte |  9 +++++----
 7 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
index 13a40cb2db..7de1868640 100644
--- a/src/lib/components/fakeModal.svelte
+++ b/src/lib/components/fakeModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -112,14 +112,14 @@
                 <div class="modal-content">
                     <div class="modal-content-spacer u-flex-vertical u-gap-24 u-width-full-line">
                         {#if error}
-                            <Alert
+                            <Alert.Inline
+                                status="warning"
                                 dismissible
-                                type="warning"
                                 on:dismiss={() => {
                                     error = null;
                                 }}>
                                 {error}
-                            </Alert>
+                            </Alert.Inline>
                         {/if}
                         <slot />
                     </div>
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 83654a708c..df92d9894c 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { Alert, DropList } from '$lib/components';
+    import { DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Link, Pill } from '$lib/elements';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import {
         checkForProjectLimitation,
         checkForUsageFees,
@@ -95,16 +96,16 @@
     {#if services.length}
         <slot name="alert" {limit} {tier} {title} {upgradeMethod} {hasUsageFees} {services}>
             {#if $organization?.billingPlan !== BillingPlan.FREE && hasUsageFees}
-                <Alert type="info" isStandalone>
+                <Alert.Inline status="info">
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan.
                         <Link on:mousedown={() => ($showUsageRatesModal = true)}
                             >Excess usage fees will apply</Link
                         >.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {:else}
-                <Alert type={alertType} isStandalone>
+                <Alert.Inline status={alertType === 'default' ? 'info' : alertType}>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Link
                             href={$upgradeURL}
@@ -112,7 +113,7 @@
                             eventData={{ from: 'event', source: 'inline_alert' }}>Upgrade</Link> your
                         organization for additional resources.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {/if}
         </slot>
     {/if}
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
index e96fe0295d..e521985a52 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import type { EstimationDeleteOrganization } from '$lib/sdk/billing';
     import InvoicesTable from './invoicesTable.svelte';
     export let estimation: EstimationDeleteOrganization;
@@ -7,10 +7,10 @@
 
 {#if estimation}
     {#if estimation.unpaidInvoices?.length > 0}
-        <Alert type="warning">
+        <Alert.Inline status="warning">
             This organization has unresolved invoices that must be settled before it can be deleted.
             Please review and resolve these invoices to proceed.
-        </Alert>
+        </Alert.Inline>
 
         <InvoicesTable invoices={estimation.unpaidInvoices} showActions={false} />
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index e131ce7ad0..bf44759f14 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -3,7 +3,8 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Confirm, Id } from '$lib/components';
+    import { Confirm, Id } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Dependencies } from '$lib/constants';
     import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -343,7 +344,8 @@
                 {/each}
             </Table.Root>
             <div class="u-flex u-flex-vertical u-gap-16">
-                <Alert>To change the selection edit the relationship settings.</Alert>
+                <Alert.Inline status="info"
+                    >To change the selection edit the relationship settings.</Alert.Inline>
 
                 <ul>
                     <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
index fb956a65f0..b840c92664 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
@@ -13,7 +13,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import UpdateRepository from './updateRepository.svelte';
@@ -55,8 +55,8 @@
 
 <Container>
     {#if data.function.version === 'v2' && showAlert}
-        <Alert
-            type="warning"
+        <Alert.Inline
+            status="warning"
             dismissible
             class="u-margin-block-start-24"
             on:dismiss={() => (showAlert = false)}>
@@ -69,7 +69,7 @@
                 rel="noopener noreferrer"
                 class="link">documentation</a
             >.
-            <svelte:fragment slot="buttons">
+            <svelte:fragment slot="actions">
                 <Button
                     on:click={() =>
                         trackEvent(Click.WebsiteOpenClick, {
@@ -83,7 +83,7 @@
                     Learn more
                 </Button>
             </svelte:fragment>
-        </Alert>
+        </Alert.Inline>
     {/if}
     <ExecuteFunction />
     <UpdateName />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
index 16237068a4..db776b05d0 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import Alert from '$lib/components/alert.svelte';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
@@ -75,9 +75,9 @@
                 </Layout.Stack>
             </Upload.Dropzone>
             {#if variables?.length > 0}
-                <Alert type="info" dismissible>
+                <Alert.Inline status="info" dismissible>
                     This action can create and update variables but can not delete them.
-                </Alert>
+                </Alert.Inline>
             {/if}
         </Layout.Stack>
         <Selector.Checkbox
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 62bbb8c4bd..2cd9ad4a5d 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid } from '$lib/components';
+    import { CardGrid } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { BillingPlan } from '$lib/constants';
     import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
@@ -45,7 +46,7 @@
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-                <Alert type="info">
+                <Alert.Inline status="info">
                     <p class="text">
                         The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
                             parseInt(size.value)
@@ -54,7 +55,7 @@
                             Upgrade to allow files of a larger size.
                         {/if}
                     </p>
-                    <svelte:fragment slot="action">
+                    <svelte:fragment slot="actions">
                         {#if $organization?.billingPlan === BillingPlan.FREE}
                             <div class="alert-buttons u-flex">
                                 <Button
@@ -68,7 +69,7 @@
                             </div>
                         {/if}
                     </svelte:fragment>
-                </Alert>
+                </Alert.Inline>
             {/if}
             <InputNumber
                 required

From 8db16212c2ecff1b575a3b56246d80b5bfe6581d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:46:51 +0530
Subject: [PATCH 3/5] fix:removed a class

---
 .../function-[function]/settings/+page.svelte | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
index b840c92664..e2ca20f038 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
@@ -55,35 +55,33 @@
 
 <Container>
     {#if data.function.version === 'v2' && showAlert}
-        <Alert.Inline
-            status="warning"
-            dismissible
-            class="u-margin-block-start-24"
-            on:dismiss={() => (showAlert = false)}>
-            <svelte:fragment slot="title">Your function is outdated</svelte:fragment>
-            Update your function version to make use of new features including build commands and HTTP
-            data in your executions. To update, follow the steps outlined in our
-            <a
-                href="https://appwrite.io/docs/products/functions/development"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">documentation</a
-            >.
-            <svelte:fragment slot="actions">
-                <Button
-                    on:click={() =>
-                        trackEvent(Click.WebsiteOpenClick, {
-                            from: 'button',
-                            source: 'function_keys_card',
-                            destination: 'docs'
-                        })}
+        <div class="u-margin-block-start-24">
+            <Alert.Inline status="warning" dismissible on:dismiss={() => (showAlert = false)}>
+                <svelte:fragment slot="title">Your function is outdated</svelte:fragment>
+                Update your function version to make use of new features including build commands and
+                HTTP data in your executions. To update, follow the steps outlined in our
+                <a
                     href="https://appwrite.io/docs/products/functions/development"
-                    external
-                    text>
-                    Learn more
-                </Button>
-            </svelte:fragment>
-        </Alert.Inline>
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">documentation</a
+                >.
+                <svelte:fragment slot="actions">
+                    <Button
+                        on:click={() =>
+                            trackEvent(Click.WebsiteOpenClick, {
+                                from: 'button',
+                                source: 'function_keys_card',
+                                destination: 'docs'
+                            })}
+                        href="https://appwrite.io/docs/products/functions/development"
+                        external
+                        text>
+                        Learn more
+                    </Button>
+                </svelte:fragment>
+            </Alert.Inline>
+        </div>
     {/if}
     <ExecuteFunction />
     <UpdateName />

From 5c225f888f6456d2d5143b85e61882584887f975 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 21 Jul 2025 11:03:16 +0530
Subject: [PATCH 4/5] fix:done some chnages suggested

---
 src/lib/layout/containerHeader.svelte         |  4 ++--
 .../collection-[collection]/table.svelte      |  7 ++++---
 .../function-[function]/settings/+page.svelte | 21 ++++++++++---------
 .../settings/updateMaxFileSize.svelte         | 14 ++++++-------
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index df92d9894c..c33adf668a 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -23,7 +23,7 @@
     export let title: string;
     export let serviceId = title.toLocaleLowerCase() as PlanServices;
     export let total: number = null;
-    export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
+    export let alertType: 'info' | 'success' | 'warning' | 'error' = 'warning';
     export let showAlert = true;
 
     export let buttonText: string = null;
@@ -105,7 +105,7 @@
                     </span>
                 </Alert.Inline>
             {:else}
-                <Alert.Inline status={alertType === 'default' ? 'info' : alertType}>
+                <Alert.Inline status={alertType}>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Link
                             href={$upgradeURL}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index bf44759f14..b3cfd4fd5b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -29,7 +29,8 @@
         Badge,
         FloatingActionBar,
         InteractiveText,
-        Typography
+        Typography,
+        Layout
     } from '@appwrite.io/pink-svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
@@ -343,7 +344,7 @@
                     </Table.Row.Base>
                 {/each}
             </Table.Root>
-            <div class="u-flex u-flex-vertical u-gap-16">
+            <Layout.Stack gap="m" direction="column">
                 <Alert.Inline status="info"
                     >To change the selection edit the relationship settings.</Alert.Inline>
 
@@ -352,7 +353,7 @@
                         Delete document from <span data-private>{$collection.name}</span>
                     </InputChoice>
                 </ul>
-            </div>
+            </Layout.Stack>
         {:else}
             <p class="u-bold">This action is irreversible.</p>
         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
index e2ca20f038..dcb18ae293 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
@@ -22,6 +22,7 @@
     import { isCloud } from '$lib/system';
     import UpdateVariables from '$routes/(console)/project-[region]-[project]/updateVariables.svelte';
     import { page } from '$app/state';
+    import { Link } from '$lib/elements';
 
     export let data;
     let showAlert = true;
@@ -55,16 +56,16 @@
 
 <Container>
     {#if data.function.version === 'v2' && showAlert}
-        <div class="u-margin-block-start-24">
-            <Alert.Inline status="warning" dismissible on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">Your function is outdated</svelte:fragment>
-                Update your function version to make use of new features including build commands and
-                HTTP data in your executions. To update, follow the steps outlined in our
-                <a
-                    href="https://appwrite.io/docs/products/functions/development"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="link">documentation</a
+        <div>
+            <Alert.Inline
+                status="warning"
+                dismissible
+                title="Your function is outdated"
+                on:dismiss={() => (showAlert = false)}>
+                Update your function version to make use of new features including build commands
+                and HTTP data in your executions. To update, follow the steps outlined in our
+                <Link href="https://appwrite.io/docs/products/functions/development" external
+                    >documentation</Link
                 >.
                 <svelte:fragment slot="actions">
                     <Button
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 2cd9ad4a5d..6e8b681dce 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -47,14 +47,12 @@
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
                 <Alert.Inline status="info">
-                    <p class="text">
-                        The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
-                            parseInt(size.value)
-                        )}{size.unit}.
-                        {#if $organization?.billingPlan === BillingPlan.FREE}
-                            Upgrade to allow files of a larger size.
-                        {/if}
-                    </p>
+                    The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
+                        parseInt(size.value)
+                    )}{size.unit}.
+                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                        Upgrade to allow files of a larger size.
+                    {/if}
                     <svelte:fragment slot="actions">
                         {#if $organization?.billingPlan === BillingPlan.FREE}
                             <div class="alert-buttons u-flex">

From b7009ef8d4567c705407389f5bf29b164d8257a2 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 25 Jul 2025 12:13:18 +0530
Subject: [PATCH 5/5] changed size from m to l

---
 .../database-[database]/collection-[collection]/table.svelte   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index b3cfd4fd5b..d20b0386ee 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -344,10 +344,9 @@
                     </Table.Row.Base>
                 {/each}
             </Table.Root>
-            <Layout.Stack gap="m" direction="column">
+            <Layout.Stack gap="l" direction="column">
                 <Alert.Inline status="info"
                     >To change the selection edit the relationship settings.</Alert.Inline>
-
                 <ul>
                     <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
                         Delete document from <span data-private>{$collection.name}</span>