From 0c7b467b58234ea749998864e429cb8aeb5463f7 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 16:56:10 +0530 Subject: [PATCH 01/15] fix: match by key when $id is absent to prevent all variables being overwritten, add portal to fix action menu clipping --- src/lib/components/variables/environmentVariables.svelte | 1 + src/lib/components/variables/updateVariableModal.svelte | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 98290c0412..de412861a8 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -182,6 +182,7 @@ { - if (variable.$id === selectedVar.$id) { - return pair; - } - return variable; + const match = selectedVar.$id + ? variable.$id === selectedVar.$id + : variable.key === selectedVar.key; + return match ? pair : variable; }); } else { variables = [...variables, pair]; From 806df25b614ed539e1b402fb8f5adc4736e1db1e Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:00:51 +0530 Subject: [PATCH 02/15] =?UTF-8?q?revert:=20remove=20portal=20from=20wizard?= =?UTF-8?q?=20env=20variables=20popover=20=E2=80=94=20breaks=20onclick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/variables/environmentVariables.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index de412861a8..98290c0412 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -182,7 +182,6 @@ Date: Mon, 29 Jun 2026 17:04:40 +0530 Subject: [PATCH 03/15] fix: allow action menu to overflow table cell so popover is not clipped --- src/lib/components/variables/environmentVariables.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 98290c0412..2498cdff28 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -278,3 +278,9 @@ {#if showDelete} {/if} + + From 56515de379cf332160a8f958fb150e0bb8c89069 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:07:07 +0530 Subject: [PATCH 04/15] fix: override table cell overflow to unclip action menu popover --- src/lib/components/variables/environmentVariables.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 2498cdff28..02fca22b0c 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -280,7 +280,7 @@ {/if} From 9f2ef42a8b73ad529d54f8a5620970bc2abe1968 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:11:02 +0530 Subject: [PATCH 05/15] fix: use portal for action menu popover, set state before toggle to ensure clicks register --- .../variables/environmentVariables.svelte | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 02fca22b0c..04a412266c 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -182,6 +182,7 @@ { - toggle(e); currentVariable = variable; showUpdate = true; + toggle(e); }}> Update @@ -212,9 +213,9 @@ { - toggle(e); currentVariable = variable; showSecretModal = true; + toggle(e); }}> Secret @@ -223,9 +224,9 @@ status="danger" leadingIcon={IconTrash} onclick={(e) => { - toggle(e); currentVariable = variable; showDelete = true; + toggle(e); }}> Delete @@ -278,9 +279,3 @@ {#if showDelete} {/if} - - From 3bdc82f4a43e00142f5a7217c19fc8538a333412 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:16:32 +0530 Subject: [PATCH 06/15] fix: replace pink Popover with custom Svelte 5 floating action menu to fix clipping and click issues --- .../variables/environmentVariables.svelte | 80 +++---------- .../variables/variableActionMenu.svelte | 108 ++++++++++++++++++ 2 files changed, 125 insertions(+), 63 deletions(-) create mode 100644 src/lib/components/variables/variableActionMenu.svelte diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 04a412266c..e6f50738a4 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -2,27 +2,21 @@ import { Empty, Paginator } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { - ActionMenu, Accordion, Badge, InteractiveText, Icon, Layout, - Popover, Skeleton, Table, - Tooltip, - Button as PinkButton + Tooltip } from '@appwrite.io/pink-svelte'; import { - IconDotsHorizontal, IconCode, IconUpload, - IconPlus, - IconTrash, - IconEyeOff, - IconPencil + IconPlus } from '@appwrite.io/pink-icons-svelte'; + import VariableActionMenu from './variableActionMenu.svelte'; import type { Models } from '@appwrite.io/console'; import VariableEditorModal from './variableEditorModal.svelte'; import SecretVariableModal from './secretVariableModal.svelte'; @@ -179,60 +173,20 @@
- - { - e.preventDefault(); - toggle(e); - }}> - - - - - - {#if !variable?.secret} - { - currentVariable = variable; - showUpdate = true; - toggle(e); - }}> - Update - - {/if} - {#if !variable?.secret} - { - currentVariable = variable; - showSecretModal = true; - toggle(e); - }}> - Secret - - {/if} - { - currentVariable = variable; - showDelete = true; - toggle(e); - }}> - Delete - - - - + { + currentVariable = variable; + showUpdate = true; + }} + onSecret={() => { + currentVariable = variable; + showSecretModal = true; + }} + onDelete={() => { + currentVariable = variable; + showDelete = true; + }} />
diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte new file mode 100644 index 0000000000..3ee56f8f40 --- /dev/null +++ b/src/lib/components/variables/variableActionMenu.svelte @@ -0,0 +1,108 @@ + + + + + + { + e.preventDefault(); + e.stopPropagation(); + toggle(); + }}> + + + + +{#if open} +
+ + {#if !variable?.secret} + { hide(); onUpdate(); }}> + Update + + {/if} + {#if !variable?.secret} + { hide(); onSecret(); }}> + Secret + + {/if} + { hide(); onDelete(); }}> + Delete + + +
+{/if} From de34d5e130dfef36e540bbf93bfe8b2cfa38c405 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:17:30 +0530 Subject: [PATCH 07/15] fix: add background, border and shadow to floating action menu --- src/lib/components/variables/variableActionMenu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte index 3ee56f8f40..8c6aee2fd2 100644 --- a/src/lib/components/variables/variableActionMenu.svelte +++ b/src/lib/components/variables/variableActionMenu.svelte @@ -80,7 +80,7 @@ {#if open}
{#if !variable?.secret} From e1e5ce4eec1f0841c8647240dd288079342f4718 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:21:39 +0530 Subject: [PATCH 08/15] fix: portal menu div to document.body to prevent table cell layout breakage on mobile --- src/lib/components/variables/variableActionMenu.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte index 8c6aee2fd2..d33153765d 100644 --- a/src/lib/components/variables/variableActionMenu.svelte +++ b/src/lib/components/variables/variableActionMenu.svelte @@ -30,6 +30,15 @@ open = !open; } + function portalToBody(node: HTMLElement) { + document.body.appendChild(node); + return { + destroy() { + node.parentNode?.removeChild(node); + } + }; + } + $effect(() => { if (open && triggerEl && menuEl) { cleanup = autoUpdate(triggerEl, menuEl, () => { @@ -79,6 +88,7 @@ {#if open}
From 7160ccbe5564247e37e87956851af8591f2ec0a5 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:25:20 +0530 Subject: [PATCH 09/15] fix: reduce min column widths on small viewport to prevent table overflow --- .../components/variables/environmentVariables.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index e6f50738a4..f91e1b5a42 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -60,14 +60,14 @@ const tableColumns = $derived( $isSmallViewport ? [ - { id: 'key', width: { min: 420 } }, - { id: 'value', width: { min: 240 } }, - { id: 'actions', width: 40 } + { id: 'key', width: { min: 380, max: 520 } }, + { id: 'value', width: { min: 200, max: 320 } }, + { id: 'actions', width: 50 } ] : [ - { id: 'key', width: { min: 300 } }, - { id: 'value', width: { min: 280 } }, - { id: 'actions', width: 40 } + { id: 'key', width: { min: 280, max: 420 } }, + { id: 'value', width: { min: 200, max: 400 } }, + { id: 'actions', width: 50 } ] ); From d86ad4ec24dccd9a096a612ac4ef411893ccffbb Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:27:09 +0530 Subject: [PATCH 10/15] fix: use small min widths on mobile so table fits inside wizard container --- src/lib/components/variables/environmentVariables.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index f91e1b5a42..f4926cbf6c 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -60,9 +60,9 @@ const tableColumns = $derived( $isSmallViewport ? [ - { id: 'key', width: { min: 380, max: 520 } }, - { id: 'value', width: { min: 200, max: 320 } }, - { id: 'actions', width: 50 } + { id: 'key', width: { min: 120, max: 300 } }, + { id: 'value', width: { min: 100, max: 200 } }, + { id: 'actions', width: 40 } ] : [ { id: 'key', width: { min: 280, max: 420 } }, From 7193390c2feb629bc1820d251c44a13b8af32081 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:29:05 +0530 Subject: [PATCH 11/15] fix: show icon-only create variable button on mobile to save horizontal space --- src/lib/components/variables/environmentVariables.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index f4926cbf6c..21a93dbdc5 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -105,13 +105,15 @@ {/if} From c58a082c2aafe2157794116507b18bffb90d1133 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:31:42 +0530 Subject: [PATCH 12/15] fix: add strategy fixed, return autoUpdate cleanup from effect, use onclick --- .../variables/variableActionMenu.svelte | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte index d33153765d..f8f2bea5bb 100644 --- a/src/lib/components/variables/variableActionMenu.svelte +++ b/src/lib/components/variables/variableActionMenu.svelte @@ -20,7 +20,6 @@ let open = $state(false); let triggerEl = $state(null); let menuEl = $state(null); - let cleanup: (() => void) | null = null; function hide() { open = false; @@ -40,21 +39,21 @@ } $effect(() => { - if (open && triggerEl && menuEl) { - cleanup = autoUpdate(triggerEl, menuEl, () => { - computePosition(triggerEl, menuEl, { - placement: 'bottom-end', - middleware: [offset(2), flip(), shift()] - }).then(({ x, y }) => { - if (menuEl) { - Object.assign(menuEl.style, { left: `${x}px`, top: `${y}px` }); - } - }); + if (!open || !triggerEl || !menuEl) return; + + const stop = autoUpdate(triggerEl, menuEl, () => { + computePosition(triggerEl, menuEl, { + placement: 'bottom-end', + strategy: 'fixed', + middleware: [offset(2), flip(), shift()] + }).then(({ x, y }) => { + if (menuEl) { + Object.assign(menuEl.style, { left: `${x}px`, top: `${y}px` }); + } }); - } else { - cleanup?.(); - cleanup = null; - } + }); + + return stop; }); function handleWindowClick(e: MouseEvent) { @@ -96,21 +95,21 @@ {#if !variable?.secret} { hide(); onUpdate(); }}> + onclick={() => { hide(); onUpdate(); }}> Update {/if} {#if !variable?.secret} { hide(); onSecret(); }}> + onclick={() => { hide(); onSecret(); }}> Secret {/if} { hide(); onDelete(); }}> + onclick={() => { hide(); onDelete(); }}> Delete From d73328c315c2d0f805e79c63740093337e4f91bf Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 29 Jun 2026 17:33:15 +0530 Subject: [PATCH 13/15] format --- .../variables/environmentVariables.svelte | 6 +---- .../variables/variableActionMenu.svelte | 22 +++++++++++++++---- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 21a93dbdc5..595cc08ac5 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -11,11 +11,7 @@ Table, Tooltip } from '@appwrite.io/pink-svelte'; - import { - IconCode, - IconUpload, - IconPlus - } from '@appwrite.io/pink-icons-svelte'; + import { IconCode, IconUpload, IconPlus } from '@appwrite.io/pink-icons-svelte'; import VariableActionMenu from './variableActionMenu.svelte'; import type { Models } from '@appwrite.io/console'; import VariableEditorModal from './variableEditorModal.svelte'; diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte index f8f2bea5bb..1d9caa1788 100644 --- a/src/lib/components/variables/variableActionMenu.svelte +++ b/src/lib/components/variables/variableActionMenu.svelte @@ -1,7 +1,12 @@