diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte
index 98290c0412..595cc08ac5 100644
--- a/src/lib/components/variables/environmentVariables.svelte
+++ b/src/lib/components/variables/environmentVariables.svelte
@@ -2,27 +2,17 @@
     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
-    } 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';
     import SecretVariableModal from './secretVariableModal.svelte';
@@ -66,14 +56,14 @@
     const tableColumns = $derived(
         $isSmallViewport
             ? [
-                  { id: 'key', width: { min: 420 } },
-                  { id: 'value', width: { min: 240 } },
+                  { id: 'key', width: { min: 120, max: 300 } },
+                  { id: 'value', width: { min: 100, max: 200 } },
                   { id: 'actions', width: 40 }
               ]
             : [
-                  { 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 }
               ]
     );
 </script>
@@ -111,13 +101,15 @@
                     <Button
                         secondary
                         size="s"
+                        icon={$isSmallViewport}
                         on:click={() => {
                             showCreate = true;
                             trackEvent(Click.VariablesCreateClick, {
                                 source: createSource
                             });
                         }}>
-                        <Icon slot="start" icon={IconPlus} /> Create variable
+                        <Icon slot="start" icon={IconPlus} />
+                        {#if !$isSmallViewport}Create variable{/if}
                     </Button>
                 {/if}
             </Layout.Stack>
@@ -179,59 +171,20 @@
                                     </Table.Cell>
                                     <Table.Cell column="actions" {root}>
                                         <div style="margin-inline-start: auto">
-                                            <Popover
-                                                padding="none"
-                                                placement="bottom-end"
-                                                let:toggle>
-                                                <PinkButton.Button
-                                                    icon
-                                                    variant="text"
-                                                    size="s"
-                                                    aria-label="More options"
-                                                    onclick={(e) => {
-                                                        e.preventDefault();
-                                                        toggle(e);
-                                                    }}>
-                                                    <Icon icon={IconDotsHorizontal} size="s" />
-                                                </PinkButton.Button>
-
-                                                <svelte:fragment slot="tooltip" let:toggle>
-                                                    <ActionMenu.Root>
-                                                        {#if !variable?.secret}
-                                                            <ActionMenu.Item.Button
-                                                                leadingIcon={IconPencil}
-                                                                onclick={(e) => {
-                                                                    toggle(e);
-                                                                    currentVariable = variable;
-                                                                    showUpdate = true;
-                                                                }}>
-                                                                Update
-                                                            </ActionMenu.Item.Button>
-                                                        {/if}
-                                                        {#if !variable?.secret}
-                                                            <ActionMenu.Item.Button
-                                                                leadingIcon={IconEyeOff}
-                                                                onclick={(e) => {
-                                                                    toggle(e);
-                                                                    currentVariable = variable;
-                                                                    showSecretModal = true;
-                                                                }}>
-                                                                Secret
-                                                            </ActionMenu.Item.Button>
-                                                        {/if}
-                                                        <ActionMenu.Item.Button
-                                                            status="danger"
-                                                            leadingIcon={IconTrash}
-                                                            onclick={(e) => {
-                                                                toggle(e);
-                                                                currentVariable = variable;
-                                                                showDelete = true;
-                                                            }}>
-                                                            Delete
-                                                        </ActionMenu.Item.Button>
-                                                    </ActionMenu.Root>
-                                                </svelte:fragment>
-                                            </Popover>
+                                            <VariableActionMenu
+                                                {variable}
+                                                onUpdate={() => {
+                                                    currentVariable = variable;
+                                                    showUpdate = true;
+                                                }}
+                                                onSecret={() => {
+                                                    currentVariable = variable;
+                                                    showSecretModal = true;
+                                                }}
+                                                onDelete={() => {
+                                                    currentVariable = variable;
+                                                    showDelete = true;
+                                                }} />
                                         </div>
                                     </Table.Cell>
                                 </Table.Row.Base>
diff --git a/src/lib/components/variables/updateVariableModal.svelte b/src/lib/components/variables/updateVariableModal.svelte
index bf48d8b62f..7d02391fab 100644
--- a/src/lib/components/variables/updateVariableModal.svelte
+++ b/src/lib/components/variables/updateVariableModal.svelte
@@ -23,10 +23,10 @@
     function handleVariable() {
         if (selectedVar) {
             variables = variables.map((variable) => {
-                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];
diff --git a/src/lib/components/variables/variableActionMenu.svelte b/src/lib/components/variables/variableActionMenu.svelte
new file mode 100644
index 0000000000..1969f04a96
--- /dev/null
+++ b/src/lib/components/variables/variableActionMenu.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';
+    import { Icon, ActionMenu } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconPencil,
+        IconEyeOff,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Button as PinkButton } from '@appwrite.io/pink-svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    let {
+        variable,
+        onUpdate,
+        onSecret,
+        onDelete
+    }: {
+        variable: Partial<Models.Variable>;
+        onUpdate: () => void;
+        onSecret: () => void;
+        onDelete: () => void;
+    } = $props();
+
+    let open = $state(false);
+    let triggerEl = $state<HTMLElement | null>(null);
+    let menuEl = $state<HTMLElement | null>(null);
+    let cleanup: (() => void) | null = null;
+
+    function hide() {
+        open = false;
+    }
+
+    function toggle() {
+        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, () => {
+                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` });
+                    }
+                });
+            });
+        } else {
+            cleanup?.();
+            cleanup = null;
+        }
+    });
+
+    function handleWindowClick(e: MouseEvent) {
+        if (!open) return;
+        const target = e.target as Node;
+        if (triggerEl?.contains(target) || menuEl?.contains(target)) return;
+        hide();
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') hide();
+    }
+</script>
+
+<svelte:window onclick={handleWindowClick} onkeydown={handleKeydown} />
+
+<span bind:this={triggerEl}>
+    <PinkButton.Button
+        icon
+        variant="text"
+        size="s"
+        aria-label="More options"
+        onclick={(e) => {
+            e.preventDefault();
+            toggle();
+        }}>
+        <Icon icon={IconDotsHorizontal} size="s" />
+    </PinkButton.Button>
+</span>
+
+{#if open}
+    <div
+        use:portalToBody
+        bind:this={menuEl}
+        style="position: fixed; z-index: 9001; background: var(--bgcolor-neutral-primary); border: var(--border-width-s) solid var(--border-neutral); border-radius: var(--border-radius-m); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.03), 0 4px 4px 0 rgba(0,0,0,0.04); overflow: hidden;"
+        role="menu">
+        <ActionMenu.Root>
+            {#if !variable?.secret}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconPencil}
+                    on:click={() => {
+                        hide();
+                        onUpdate();
+                    }}>
+                    Update
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if !variable?.secret}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconEyeOff}
+                    on:click={() => {
+                        hide();
+                        onSecret();
+                    }}>
+                    Secret
+                </ActionMenu.Item.Button>
+            {/if}
+            <ActionMenu.Item.Button
+                status="danger"
+                leadingIcon={IconTrash}
+                on:click={() => {
+                    hide();
+                    onDelete();
+                }}>
+                Delete
+            </ActionMenu.Item.Button>
+        </ActionMenu.Root>
+    </div>
+{/if}