From a25298dac899fed76c6572d93df38f2ff9b03dd4 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Sat, 28 Mar 2026 10:30:08 +0000
Subject: [PATCH] fix: resolve table overflow by adding Container component
 with disableMarginBlock

---
 src/lib/layout/container.svelte               |   6 +
 .../settings/updateInstallations.svelte       | 130 ++++++------
 .../updateVariables.svelte                    | 186 +++++++++---------
 3 files changed, 169 insertions(+), 153 deletions(-)

diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index ffc83085b6..dec3ca9861 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -13,6 +13,7 @@
         databasesScreen = false,
         databasesMainScreen = false,
         expandHeightButton = false,
+        disableMarginBlock = false,
         size = null,
         children,
         ...restProps
@@ -26,6 +27,7 @@
         databasesScreen?: boolean;
         databasesMainScreen?: boolean;
         expandHeightButton?: boolean;
+        disableMarginBlock?: boolean;
         children?: Snippet;
         size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
     } & HTMLAttributes<HTMLDivElement> = $props();
@@ -46,6 +48,7 @@
         class:databasesScreen
         class:expandHeightButton
         class:databasesMainScreen
+        class:disableMarginBlock
         class="console-container"
         class:paddingInlineEndDouble
         class:paddingInlineEnd={!paddingInlineEnd}>
@@ -62,6 +65,9 @@
     }
     :global(.console-container) {
         margin-block: var(--base-32);
+        &.disableMarginBlock {
+            margin-block: unset;
+        }
 
         &.insideSideSheet {
             margin-block: var(--base-20);
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
index 8cb2cb9f8e..3bb35ea0a7 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
@@ -2,6 +2,7 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/state';
     import { Avatar, CardGrid, PaginationInline } from '$lib/components';
+    import { Container } from '$lib/layout';
     import { Button as FormButton } from '$lib/elements/forms';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
@@ -95,68 +96,73 @@
                         Add installation
                     </FormButton>
                 </Layout.Stack>
-
-                <Table.Root
-                    let:root
-                    columns={[
-                        { id: 'owner', width: { min: 150, max: 500 } },
-                        { id: 'updated', width: { min: 150, max: 500 } },
-                        { id: 'actions', width: 60 }
-                    ]}>
-                    <svelte:fragment slot="header" let:root>
-                        <Table.Header.Cell column="owner" {root}>Owner</Table.Header.Cell>
-                        <Table.Header.Cell column="updated" {root}>Updated</Table.Header.Cell>
-                        <Table.Header.Cell column="actions" {root} />
-                    </svelte:fragment>
-                    {#each installations as installation, i}
-                        <Table.Row.Base {root}>
-                            <Table.Cell column="owner" {root}>
-                                <Layout.Stack direction="row" gap="s" alignItems="center">
-                                    <Avatar alt={installation.provider} size="xs">
-                                        <Icon
-                                            icon={getProviderIcon(installation.provider)}
-                                            size="s" />
-                                    </Avatar>
-                                    <Link href={getInstallationLink(installation)} external icon>
-                                        {installation.organization}
-                                    </Link>
-                                </Layout.Stack>
-                            </Table.Cell>
-                            <Table.Cell column="updated" {root}>
-                                <DualTimeView time={installation.$updatedAt} />
-                            </Table.Cell>
-                            <Table.Cell column="actions" {root}>
-                                <Popover let:toggle padding="none" placement="bottom-end">
-                                    <button
-                                        type="button"
-                                        class="button is-text is-only-icon"
-                                        aria-label="more options"
-                                        on:click={toggle}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true"
-                                        ></span>
-                                    </button>
-                                    <ActionMenu.Root slot="tooltip">
-                                        <ActionMenu.Item.Anchor
-                                            href={configureGitHub()}
-                                            trailingIcon={IconExternalLink}
-                                            on:click={() => (showInstallationDropdown[i] = false)}>
-                                            Configure
-                                        </ActionMenu.Item.Anchor>
-                                        <ActionMenu.Item.Button
-                                            trailingIcon={IconXCircle}
-                                            on:click={() => {
-                                                showInstallationDropdown[i] = false;
-                                                showGitDisconnect = true;
-                                                selectedInstallation = installation;
-                                            }}>
-                                            Disconnect
-                                        </ActionMenu.Item.Button>
-                                    </ActionMenu.Root>
-                                </Popover>
-                            </Table.Cell>
-                        </Table.Row.Base>
-                    {/each}
-                </Table.Root>
+                <Container disableMarginBlock>
+                    <Table.Root
+                        let:root
+                        columns={[
+                            { id: 'owner', width: { min: 150, max: 500 } },
+                            { id: 'updated', width: { min: 150, max: 500 } },
+                            { id: 'actions', width: 60 }
+                        ]}>
+                        <svelte:fragment slot="header" let:root>
+                            <Table.Header.Cell column="owner" {root}>Owner</Table.Header.Cell>
+                            <Table.Header.Cell column="updated" {root}>Updated</Table.Header.Cell>
+                            <Table.Header.Cell column="actions" {root} />
+                        </svelte:fragment>
+                        {#each installations as installation, i}
+                            <Table.Row.Base {root}>
+                                <Table.Cell column="owner" {root}>
+                                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                                        <Avatar alt={installation.provider} size="xs">
+                                            <Icon
+                                                icon={getProviderIcon(installation.provider)}
+                                                size="s" />
+                                        </Avatar>
+                                        <Link
+                                            href={getInstallationLink(installation)}
+                                            external
+                                            icon>
+                                            {installation.organization}
+                                        </Link>
+                                    </Layout.Stack>
+                                </Table.Cell>
+                                <Table.Cell column="updated" {root}>
+                                    <DualTimeView time={installation.$updatedAt} />
+                                </Table.Cell>
+                                <Table.Cell column="actions" {root}>
+                                    <Popover let:toggle padding="none" placement="bottom-end">
+                                        <button
+                                            type="button"
+                                            class="button is-text is-only-icon"
+                                            aria-label="more options"
+                                            on:click={toggle}>
+                                            <span class="icon-dots-horizontal" aria-hidden="true"
+                                            ></span>
+                                        </button>
+                                        <ActionMenu.Root slot="tooltip">
+                                            <ActionMenu.Item.Anchor
+                                                href={configureGitHub()}
+                                                trailingIcon={IconExternalLink}
+                                                on:click={() =>
+                                                    (showInstallationDropdown[i] = false)}>
+                                                Configure
+                                            </ActionMenu.Item.Anchor>
+                                            <ActionMenu.Item.Button
+                                                trailingIcon={IconXCircle}
+                                                on:click={() => {
+                                                    showInstallationDropdown[i] = false;
+                                                    showGitDisconnect = true;
+                                                    selectedInstallation = installation;
+                                                }}>
+                                                Disconnect
+                                            </ActionMenu.Item.Button>
+                                        </ActionMenu.Root>
+                                    </Popover>
+                                </Table.Cell>
+                            </Table.Row.Base>
+                        {/each}
+                    </Table.Root>
+                </Container>
                 {#if total > limit}
                     <Layout.Stack justifyContent="space-between">
                         <p class="text">Total installations: {total}</p>
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
index 91948168ec..f7a292ceaf 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
@@ -7,6 +7,7 @@
     import { goto, invalidate } from '$app/navigation';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
+    import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import PromoteVariableModal from './promoteVariableModal.svelte';
     import CreateVariable from './createVariableModal.svelte';
@@ -343,111 +344,114 @@
                         </p>
                     </Alert.Inline>
                 {/if}
-                <Table.Root
-                    columns={[
-                        { id: 'key', width: { min: 200, max: 400 } },
-                        { id: 'value', width: { min: 200, max: 400 } },
-                        { id: 'actions', width: 50 }
-                    ]}
-                    let:root>
-                    <svelte:fragment slot="header" let:root>
-                        <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
-                        <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
-                        <Table.Header.Cell column="actions" {root} />
-                    </svelte:fragment>
-                    {#each variableList.variables.slice(offset, offset + limit) as variable}
-                        <Table.Row.Base {root}>
-                            <Table.Cell column="key" {root}>
-                                {@const isConflicting = globalVariableList
-                                    ? globalVariableList.variables.find(
-                                          (globalVariable) => globalVariable.key === variable.key
-                                      ) !== undefined
-                                    : false}
+                <Container disableMarginBlock>
+                    <Table.Root
+                        columns={[
+                            { id: 'key', width: { min: 200, max: 400 } },
+                            { id: 'value', width: { min: 200, max: 400 } },
+                            { id: 'actions', width: 50 }
+                        ]}
+                        let:root>
+                        <svelte:fragment slot="header" let:root>
+                            <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                            <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+                            <Table.Header.Cell column="actions" {root} />
+                        </svelte:fragment>
+                        {#each variableList.variables.slice(offset, offset + limit) as variable}
+                            <Table.Row.Base {root}>
+                                <Table.Cell column="key" {root}>
+                                    {@const isConflicting = globalVariableList
+                                        ? globalVariableList.variables.find(
+                                              (globalVariable) =>
+                                                  globalVariable.key === variable.key
+                                          ) !== undefined
+                                        : false}
 
-                                <Layout.Stack gap="xxs" alignItems="center" direction="row">
-                                    {#if isConflicting && hasConflictOnPage}
-                                        <span
-                                            class="icon-exclamation u-color-text-warning"
-                                            aria-hidden="true"></span>
-                                    {/if}
-                                    <Copy value={variable.key} />
-                                    <Output value={variable.key} hideCopyIcon>
-                                        {variable.key}
-                                    </Output>
-                                </Layout.Stack>
-                            </Table.Cell>
+                                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                                        {#if isConflicting && hasConflictOnPage}
+                                            <span
+                                                class="icon-exclamation u-color-text-warning"
+                                                aria-hidden="true"></span>
+                                        {/if}
+                                        <Copy value={variable.key} />
+                                        <Output value={variable.key} hideCopyIcon>
+                                            {variable.key}
+                                        </Output>
+                                    </Layout.Stack>
+                                </Table.Cell>
 
-                            <Table.Cell column="value" {root}>
-                                {#if variable.secret}
-                                    <Badge content="Secret" variant="secondary" />
-                                {:else}
-                                    <InteractiveText
-                                        variant="secret"
-                                        isVisible={false}
-                                        text={variable.value} />
-                                {/if}
-                            </Table.Cell>
-                            <Table.Cell column="actions" {root}>
-                                <Popover placement="bottom-end" let:toggle padding="none">
-                                    <Button
-                                        text
-                                        icon
-                                        on:click={(e) => {
-                                            e.preventDefault();
-                                            toggle(e);
-                                        }}>
-                                        <Icon size="s" icon={IconDotsHorizontal} />
-                                    </Button>
-                                    <svelte:fragment slot="tooltip" let:toggle>
-                                        <ActionMenu.Root>
-                                            <ActionMenu.Item.Button
-                                                trailingIcon={IconPencil}
-                                                on:click={(e) => {
-                                                    selectedVar = variable;
-                                                    showUpdate = true;
-                                                    toggle(e);
-                                                }}>
-                                                Update
-                                            </ActionMenu.Item.Button>
-                                            {#if !variable.secret}
+                                <Table.Cell column="value" {root}>
+                                    {#if variable.secret}
+                                        <Badge content="Secret" variant="secondary" />
+                                    {:else}
+                                        <InteractiveText
+                                            variant="secret"
+                                            isVisible={false}
+                                            text={variable.value} />
+                                    {/if}
+                                </Table.Cell>
+                                <Table.Cell column="actions" {root}>
+                                    <Popover placement="bottom-end" let:toggle padding="none">
+                                        <Button
+                                            text
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconDotsHorizontal} />
+                                        </Button>
+                                        <svelte:fragment slot="tooltip" let:toggle>
+                                            <ActionMenu.Root>
                                                 <ActionMenu.Item.Button
-                                                    trailingIcon={IconEyeOff}
+                                                    trailingIcon={IconPencil}
                                                     on:click={(e) => {
                                                         selectedVar = variable;
-                                                        showSecretModal = true;
+                                                        showUpdate = true;
                                                         toggle(e);
                                                     }}>
-                                                    Secret
+                                                    Update
                                                 </ActionMenu.Item.Button>
-                                            {/if}
-                                            {#if !isGlobal}
+                                                {#if !variable.secret}
+                                                    <ActionMenu.Item.Button
+                                                        trailingIcon={IconEyeOff}
+                                                        on:click={(e) => {
+                                                            selectedVar = variable;
+                                                            showSecretModal = true;
+                                                            toggle(e);
+                                                        }}>
+                                                        Secret
+                                                    </ActionMenu.Item.Button>
+                                                {/if}
+                                                {#if !isGlobal}
+                                                    <ActionMenu.Item.Button
+                                                        trailingIcon={IconGlobeAlt}
+                                                        on:click={async (e) => {
+                                                            selectedVar = variable;
+                                                            showPromoteModal = true;
+                                                            toggle(e);
+                                                        }}>
+                                                        Promote
+                                                    </ActionMenu.Item.Button>
+                                                {/if}
                                                 <ActionMenu.Item.Button
-                                                    trailingIcon={IconGlobeAlt}
+                                                    status="danger"
+                                                    trailingIcon={IconTrash}
                                                     on:click={async (e) => {
                                                         selectedVar = variable;
-                                                        showPromoteModal = true;
+                                                        showDeleteModal = true;
                                                         toggle(e);
                                                     }}>
-                                                    Promote
+                                                    Delete
                                                 </ActionMenu.Item.Button>
-                                            {/if}
-                                            <ActionMenu.Item.Button
-                                                status="danger"
-                                                trailingIcon={IconTrash}
-                                                on:click={async (e) => {
-                                                    selectedVar = variable;
-                                                    showDeleteModal = true;
-                                                    toggle(e);
-                                                }}>
-                                                Delete
-                                            </ActionMenu.Item.Button>
-                                        </ActionMenu.Root>
-                                    </svelte:fragment>
-                                </Popover>
-                            </Table.Cell>
-                        </Table.Row.Base>
-                    {/each}
-                </Table.Root>
+                                            </ActionMenu.Root>
+                                        </svelte:fragment>
+                                    </Popover>
+                                </Table.Cell>
+                            </Table.Row.Base>
+                        {/each}
+                    </Table.Root>
+                </Container>
                 {#if sum > limit}
                     <Layout.Stack direction="row" justifyContent="space-between">
                         <p class="text">Total variables: {sum}</p>