Merge remote-tracking branch 'origin/feat-database-backups' into feat-database-backups

src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte

@@ -151,10 +151,10 @@
                     lastBackupDates={data.lastBackupDates} />
             </div>
 
-            <div class="u-flex-vertical u-width-full-line">
+            <div class="u-flex-vertical u-width-full-line u-overflow-x-auto">
                 <ContainerHeader
                     title="Backups"
-                    buttonText="Manual Backup"
+                    buttonText="Manual backup"
                     buttonEvent="create_backup"
                     buttonType="secondary"
                     buttonDisabled={isDisabled}
@@ -242,14 +242,8 @@
 
 <style>
     .empty {
-        block-size: 365px;
+        /* block-size: 365px; TODO: check with design */
         text-align: center;
         align-content: center;
     }
-
-    @media (min-width: 768px) {
-        .empty {
-            min-width: 802px; /* match with the table width with items */
-        }
-    }
 </style>

src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte

@@ -21,10 +21,9 @@
         on:click={buttonMethod}
         disabled={buttonDisabled}
         text={buttonType === 'text'}
-        class="small-radius-border-button"
         secondary={buttonType === 'secondary'}>
         <span class="icon-plus" aria-hidden="true" />
-        <span class="body-text-1">{buttonText}</span>
+        {buttonText}
     </Button>
 </header>
 

src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte

@@ -213,7 +213,7 @@
                             class="small-radius-border-button"
                             on:click={() => (showCreatePolicy = true)}>
                             <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create Policy</span>
+                            <span class="text">Create policy</span>
                         </Button>
                     </div>
                 </div>

src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte

@@ -109,11 +109,10 @@
         <TableCellHeadCheck
             bind:selected={selectedBackups}
             pageItemsIds={data.backups.archives.map((b) => b.$id)} />
-
         <TableCellHead width={192}>Backups</TableCellHead>
-        <TableCellHead width={120}>Size</TableCellHead>
+        <TableCellHead width={80}>Size</TableCellHead>
         <TableCellHead width={120}>Status</TableCellHead>
-        <TableCellHead width={120}>Policy</TableCellHead>
+        <TableCellHead width={80}>Policy</TableCellHead>
         <TableCellHead width={48} />
     </TableHeader>
     <TableBody>
@@ -127,18 +126,17 @@
                     bind:selectedIds={selectedBackups}
                     disabled={backup.status !== 'completed'}
                     id={backup.status !== 'completed' ? null : backup.$id} />
-
-                <TableCell width={192} title={backup.$createdAt}>
+                <TableCell title={backup.$createdAt}>
                     {cleanBackupName(backup)}
                 </TableCell>
-                <TableCell width={120} title="Backup Size">
+                <TableCell title="Backup Size">
                     {#if backup.status === 'completed'}
                         {calculateSize(backup.size)}
                     {:else}
                         -
                     {/if}
                 </TableCell>
-                <TableCell width={120} title="Backup Status">
+                <TableCell title="Backup Status">
                     <div class="u-flex u-gap-8 u-cross-baseline">
                         <Pill
                             warning={backup.status === 'pending'}
@@ -151,7 +149,7 @@
                         <!--{/if}-->
                     </div>
                 </TableCell>
-                <TableCell width={168} title="Backup Policy">
+                <TableCell title="Backup Policy">
                     <div class="u-flex u-main-space-between u-cross-baseline">
                         <span
                             use:tooltip={{
@@ -164,7 +162,7 @@
                     </div>
                 </TableCell>
 
-                <TableCell width={48}>
+                <TableCell>
                     <div class="u-flex u-cross-center">
                         <DropList bind:show={showDropdown[index]} placement="bottom-end">
                             <button