From 4e07887cd8fe18d3b889ede58b989ddee6ea60fb Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 19 Aug 2025 13:00:03 +0530
Subject: [PATCH] fix: improved backup ui

---
 .../database-[database]/backups/+page.svelte  |  6 +-
 .../backups/containerHeader.svelte            |  1 +
 .../database-[database]/backups/policy.svelte |  4 +-
 .../database-[database]/backups/store.ts      |  6 +-
 .../database-[database]/backups/table.svelte  | 80 ++++++++++---------
 5 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
index ef597992c..1c164340c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
@@ -178,7 +178,7 @@
 </script>
 
 <Container size="xxl">
-    <div class="u-flex u-gap-32 u-flex-vertical-mobile">
+    <div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
         {#if !isDisabled}
             <div class="u-flex-vertical u-gap-16 policies-holder-card">
                 <ContainerHeader
@@ -285,4 +285,8 @@
             min-width: 330px;
         }
     }
+
+    :global(.backups-page .common-section) {
+        margin-block-start: 0 !important;
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
index 9df266290..e809f52b8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -41,6 +41,7 @@
             <div style:height="40px;" style:padding-block-start="4px">
                 <DropList bind:show={showDropdown} width="16">
                     <Badge
+                        style="white-space: nowrap; max-width: none;"
                         variant="secondary"
                         content={`${policiesCreated}/${maxPolicies} created`}
                         on:click={() => (showDropdown = true)}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
index e4af56e16..e4ccd8b91 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
@@ -198,7 +198,7 @@
 
                     <!-- Prev / Next section -->
                     <div class="policy-cycles u-flex u-gap-24 u-padding-block-2">
-                        <div style="width: 128px" class="u-flex-vertical policy-item-caption">
+                        <div style="width: 160px" class="u-flex-vertical policy-item-caption">
                             <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
                                 >Previous
                             </Typography.Caption>
@@ -225,7 +225,7 @@
                             <Divider vertical />
                         </div>
 
-                        <div style="width: 128px" class="u-flex-vertical policy-item-caption">
+                        <div style="width: 140px" class="u-flex-vertical policy-item-caption">
                             <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
                                 >Next
                             </Typography.Caption>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
index dd4b9c133..43cc2552d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
@@ -30,8 +30,8 @@ export const presetPolicies = writable<UserBackupPolicy[]>([
 
 export const columns = writable<Column[]>([
     { id: 'backups', title: 'Backups', type: 'string', width: { min: 180 } },
-    { id: 'size', title: 'Size', type: 'integer', width: { min: 163 } },
+    { id: 'size', title: 'Size', type: 'integer', width: { min: 100 } },
     { id: 'status', title: 'Status', type: 'enum', width: { min: 163 } },
-    { id: 'policy', title: 'Policy', type: 'string', width: { min: 163 } },
-    { id: 'actions', title: '', type: 'string', width: 48 }
+    { id: 'policy', title: 'Policy', type: 'string', width: { min: 100 } },
+    { id: 'actions', title: '', type: 'string', width: 64 }
 ]);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
index 1603ca8f4..689afe74f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
@@ -205,7 +205,7 @@
                 <!--{/if}-->
             </Table.Cell>
             <Table.Cell column="policy" {root}>
-                <div class="u-flex u-main-space-between u-cross-baseline">
+                <div class="u-flex u-cross-baseline">
                     <Tooltip maxWidth="fit-content">
                         <span>
                             {policy?.name || 'Manual'}
@@ -217,51 +217,53 @@
                     </Tooltip>
                 </div>
             </Table.Cell>
-            <Table.Cell column="action" {root}>
-                <Popover let:toggle padding="m" placement="bottom-end">
-                    <Button extraCompact on:click={toggle}>
-                        <Icon icon={IconDotsHorizontal} />
-                    </Button>
-                    <svelte:fragment slot="tooltip" let:toggle>
-                        <ActionMenu.Root width="180px" noPadding>
-                            {#if backup.status === 'completed'}
+            <Table.Cell column="actions" {root}>
+                <div class="action-cell u-flex u-main-end u-width-full-line">
+                    <Popover let:toggle padding="m" placement="bottom-end">
+                        <Button extraCompact on:click={toggle}>
+                            <Icon icon={IconDotsHorizontal} />
+                        </Button>
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root width="180px" noPadding>
+                                {#if backup.status === 'completed'}
+                                    <ActionMenu.Item.Button
+                                        trailingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            toggle(e);
+                                            showRestore = true;
+                                            selectedBackup = backup;
+                                            showDropdown[index] = false;
+                                            trackEvent(Click.BackupRestoreClick);
+                                        }}>
+                                        Restore
+                                    </ActionMenu.Item.Button>
+                                {/if}
                                 <ActionMenu.Item.Button
-                                    trailingIcon={IconRefresh}
+                                    trailingIcon={IconDuplicate}
                                     on:click={(e) => {
                                         toggle(e);
-                                        showRestore = true;
+                                        copy(backup.$id);
+                                        showDropdown[index] = false;
+                                        trackEvent(Click.BackupCopyIdClick);
+                                    }}>
+                                    Copy ID
+                                </ActionMenu.Item.Button>
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    trailingIcon={IconTrash}
+                                    on:click={(e) => {
+                                        toggle(e);
+                                        showDelete = true;
                                         selectedBackup = backup;
                                         showDropdown[index] = false;
-                                        trackEvent(Click.BackupRestoreClick);
+                                        trackEvent(Click.BackupDeleteClick);
                                     }}>
-                                    Restore
+                                    Delete
                                 </ActionMenu.Item.Button>
-                            {/if}
-                            <ActionMenu.Item.Button
-                                trailingIcon={IconDuplicate}
-                                on:click={(e) => {
-                                    toggle(e);
-                                    copy(backup.$id);
-                                    showDropdown[index] = false;
-                                    trackEvent(Click.BackupCopyIdClick);
-                                }}>
-                                Copy ID
-                            </ActionMenu.Item.Button>
-                            <ActionMenu.Item.Button
-                                status="danger"
-                                trailingIcon={IconTrash}
-                                on:click={(e) => {
-                                    toggle(e);
-                                    showDelete = true;
-                                    selectedBackup = backup;
-                                    showDropdown[index] = false;
-                                    trackEvent(Click.BackupDeleteClick);
-                                }}>
-                                Delete
-                            </ActionMenu.Item.Button>
-                        </ActionMenu.Root>
-                    </svelte:fragment>
-                </Popover>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </div>
             </Table.Cell>
         </Table.Row.Base>
     {/each}