From 8e31b510f2b92a9a83f01585bd6bb44bc5f90aff Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 9 Apr 2025 12:02:08 +0200
Subject: [PATCH] Fix: gaps

---
 .../create-[type]/(type)/push.svelte          | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/routes/(console)/project-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[project]/messaging/create-[type]/(type)/push.svelte
index 30b71515e..293eb432d 100644
--- a/src/routes/(console)/project-[project]/messaging/create-[type]/(type)/push.svelte
+++ b/src/routes/(console)/project-[project]/messaging/create-[type]/(type)/push.svelte
@@ -135,51 +135,53 @@
                 </Layout.Stack>
             </Fieldset>
             <Fieldset legend="Custom data">
-                <Layout.Stack>
+                <Layout.Stack gap="l">
                     <Typography.Text>
                         A key/value payload of additional metadata that's hidden from users. Use
                         this to include information to support logic such as redirection and
                         routing.
                     </Typography.Text>
-                    {#each $data as [key, value], index}
-                        <Layout.Stack direction="row" alignItems="flex-end">
-                            <InputText
-                                id={`key-${index}`}
-                                bind:value={key}
-                                placeholder="Enter key"
-                                label={index === 0 ? 'Key' : undefined} />
-                            <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                    <Layout.Stack gap="s">
+                        {#each $data as [key, value], index}
+                            <Layout.Stack direction="row" alignItems="flex-end">
                                 <InputText
-                                    id={`value-${index}`}
-                                    bind:value
-                                    placeholder="Enter value"
-                                    label={index === 0 ? 'Value' : undefined} />
-                                <Button
-                                    icon
-                                    compact
-                                    disabled={(!key || !value) && index === 0}
-                                    on:click={() => {
-                                        if (index === 0 && $data?.length === 1) {
-                                            $data = [['', '']];
-                                        } else {
-                                            $data.splice(index, 1);
-                                            $data = $data;
-                                        }
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true"></span>
-                                </Button>
+                                    id={`key-${index}`}
+                                    bind:value={key}
+                                    placeholder="Enter key"
+                                    label={index === 0 ? 'Key' : undefined} />
+                                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                                    <InputText
+                                        id={`value-${index}`}
+                                        bind:value
+                                        placeholder="Enter value"
+                                        label={index === 0 ? 'Value' : undefined} />
+                                    <Button
+                                        icon
+                                        compact
+                                        disabled={(!key || !value) && index === 0}
+                                        on:click={() => {
+                                            if (index === 0 && $data?.length === 1) {
+                                                $data = [['', '']];
+                                            } else {
+                                                $data.splice(index, 1);
+                                                $data = $data;
+                                            }
+                                        }}>
+                                        <span class="icon-x" aria-hidden="true"></span>
+                                    </Button>
+                                </Layout.Stack>
                             </Layout.Stack>
-                        </Layout.Stack>
-                    {/each}
-                    <div>
-                        <Button
-                            secondary
-                            disabled={$data.length > 0 && $data[$data.length - 1][0] === ''}
-                            on:click={() => ($data = [...$data, ['', '']])}>
-                            <Icon icon={IconPlus} slot="start" size="s" />
-                            Add data
-                        </Button>
-                    </div>
+                        {/each}
+                        <div>
+                            <Button
+                                compact
+                                disabled={$data.length > 0 && $data[$data.length - 1][0] === ''}
+                                on:click={() => ($data = [...$data, ['', '']])}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add data
+                            </Button>
+                        </div>
+                    </Layout.Stack>
                 </Layout.Stack>
             </Fieldset>
             <Fieldset legend="Targets">