From dcdf1b01ce6a04ec2913bcdd3aa2450f472d3863 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 26 Sep 2025 11:49:24 +0530
Subject: [PATCH] update: center the floating action bar!

---
 .../(suggestions)/empty.svelte                | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
index cb76163a0..b98c99ca6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
@@ -856,11 +856,16 @@
                             <Spinner size="s" />
                         {/if}
 
-                        <Typography.Text style="white-space: nowrap">
+                        <Typography.Caption
+                            variant="500"
+                            color="--fgcolor-neutral-secondary"
+                            style="white-space: nowrap">
                             {creatingColumns
-                                ? 'Creating columns...'
-                                : 'Review and edit suggested columns'}
-                        </Typography.Text>
+                                ? 'Creating columns'
+                                : $isSmallViewport
+                                  ? 'Review and edit suggested columns'
+                                  : 'Review and edit suggested columns before applying'}
+                        </Typography.Caption>
                     </Layout.Stack>
                 </svelte:fragment>
 
@@ -1031,8 +1036,17 @@
             }
 
             &.creating-columns :global(:first-child) {
-                left: calc(50% - 300px / 2);
+                left: calc(67.5% - 525px / 2);
                 max-width: 300px !important;
+
+                @media (max-width: 1024px) {
+                    left: calc(60% - 300px / 2);
+                }
+
+                @media (max-width: 768px) {
+                    left: calc(50% - 400px / 2);
+                    max-width: 400px !important;
+                }
             }
         }