diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 7fea1eb73..554e12e46 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -4,6 +4,8 @@
     import { showCreateTable, databaseSubNavigationItems } from './store';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
+    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
+
     import {
         Icon,
         Sidebar,
@@ -51,6 +53,11 @@
 
     const isMainDatabaseScreen = $derived(page.route.id.endsWith('database-[database]'));
 
+    // If banner open, `-1rem` to adjust banner size, else `-70.5px`.
+    // 70.5px is the size of the container of the banner holder and not just the banner!
+    // Needed because things vary a bit much on how different browsers treat bottom layouts.
+    const bottomNavHeight = $derived(`calc(20% ${$bannerSpacing ? '- 1rem' : '- 70.5px'})`);
+
     async function loadTables() {
         tables = await sdk.forProject(region, project).tablesDB.listTables({
             databaseId: databaseId,
@@ -149,7 +156,7 @@
             <Layout.Stack
                 gap="xxs"
                 direction="column"
-                style="bottom: 1rem; position: relative; height: calc(20% - 1rem)">
+                style="bottom: 1rem; position: relative; height: {bottomNavHeight}">
                 <div class="action-menu-divider">
                     <Divider />
                 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/suggestionsEmptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/suggestionsEmptySheet.svelte
index 432339fd3..f138ef4af 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/suggestionsEmptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/suggestionsEmptySheet.svelte
@@ -18,10 +18,20 @@
     import { debounce } from '$lib/helpers/debounce';
     import { tableColumnSuggestions } from '../../store';
 
-    const { customColumns = [] }: { customColumns?: Column[] } = $props();
+    const {
+        customColumns = []
+    }: {
+        customColumns?: Column[];
+    } = $props();
+
+    /**
+     * flip this when you want to
+     * exclude or include the `$id` for colored overlay!
+     */
+    const useFirstColumnAsId = false;
 
     // can also be `__select_undefined` if `$id` needs to be covered on overlay!
-    const firstColumn = '$id';
+    const firstColumn = useFirstColumnAsId ? '$id' : '__select_undefined';
 
     let resizeObserver: ResizeObserver;
     let spreadsheetContainer: HTMLElement;
@@ -33,16 +43,17 @@
     const baseColProps = { draggable: false, resizable: false };
 
     const findHorizontalScroller = (root: HTMLElement | null): HTMLElement | null => {
-        let el = root as HTMLElement | null;
-        while (el && el !== document.body) {
-            const st = getComputedStyle(el);
+        let element = root as HTMLElement | null;
+        while (element && element !== document.body) {
+            const computedStyles = getComputedStyle(element);
             if (
-                (st.overflowX === 'auto' || st.overflowX === 'scroll') &&
-                el.scrollWidth > el.clientWidth
+                (computedStyles.overflowX === 'auto' || computedStyles.overflowX === 'scroll') &&
+                element.scrollWidth > element.clientWidth
             ) {
-                return el;
+                return element;
             }
-            el = el.parentElement as HTMLElement | null;
+
+            element = element.parentElement as HTMLElement | null;
         }
         return null;
     };
@@ -52,6 +63,7 @@
         if (!headerElement || !headerElement.isConnected) {
             headerElement = spreadsheetContainer.querySelector('[role="rowheader"]');
         }
+
         if (!headerElement) return;
 
         const headerRect = headerElement.getBoundingClientRect();
@@ -89,8 +101,8 @@
             );
 
         const firstColumnCell = getById(firstColumn);
-        const actionsCell = getById('actions');
-        const emptyCell = getById('empty');
+        // const emptyCell = getById('empty');
+        // const actionsCell = getById('actions');
 
         // start = first content cell after `firstColumn`
         // (skip actions/empty if they were there)
@@ -108,49 +120,38 @@
 
         // end = cell right BEFORE actions;
         // else right BEFORE empty; else last content cell
-        const before = (el: HTMLElement | null) => {
-            if (!el) return null;
-            let previous = el.previousElementSibling as HTMLElement | null;
-            while (
-                previous &&
-                (previous.dataset.columnId === firstColumn ||
-                    previous.getAttribute('data-select') === 'true')
-            ) {
-                previous = previous.previousElementSibling as HTMLElement | null;
-            }
-            return previous;
-        };
+        // const before = (element: HTMLElement | null) => {
+        //     if (!element) return null;
+        //     let previous = element.previousElementSibling as HTMLElement | null;
+        //     while (
+        //         previous &&
+        //         (previous.dataset.columnId === firstColumn ||
+        //             previous.getAttribute('data-select') === 'true')
+        //     ) {
+        //         previous = previous.previousElementSibling as HTMLElement | null;
+        //     }
+        //     return previous;
+        // };
 
-        let endCell = before(actionsCell) ?? before(emptyCell);
-        if (!endCell) {
-            const cells = Array.from(
-                headerElement.querySelectorAll<HTMLElement>('[role="cell"][data-header="true"]')
-            );
-            for (let index = cells.length - 1; index >= 0; index--) {
-                const cell = cells[index];
-                const cellId = cell.dataset.columnId;
-                const isSelect = cell.getAttribute('data-select') === 'true';
-                if (!isSelect && cellId !== firstColumn && cellId !== 'actions' && cellId !== 'empty') {
-                    endCell = cell;
-                    break;
-                }
-            }
-        }
+        // let endCell = before(actionsCell) ?? before(emptyCell);
+        // let endCell = before(emptyCell);
 
-        if (!startCell || !endCell) {
+        if (!startCell /* || !endCell*/) {
             if (rangeOverlayEl) rangeOverlayEl.style.display = 'none';
             return;
         }
 
         const start = startCell.getBoundingClientRect();
-        const end = endCell.getBoundingClientRect();
+        // const end = endCell.getBoundingClientRect();
         const left = Math.round(start.left - containerRect.left);
-        const width = Math.max(0, Math.round(end.right - end.left));
+        // const width = Math.max(0, Math.round(end.right - start.right));
 
         spreadsheetContainer.style.setProperty('--group-left', `${left}px`);
-        spreadsheetContainer.style.setProperty('--group-width', `${width}px`);
+        // spreadsheetContainer.style.setProperty('--group-width', `${width}px`);
 
-        if (rangeOverlayEl) rangeOverlayEl.style.display = width > 0 ? 'block' : 'none';
+        // if (rangeOverlayEl) {
+        //     rangeOverlayEl.style.display = width > 0 ? 'block' : 'none';
+        // }
     };
 
     const recalcAll = () => {
@@ -379,7 +380,7 @@
         }
 
         & .floating-action-wrapper :global(:first-child) {
-            left: 55%;
+            left: 45%; /* change this value if the firstColumn is changed for overlay logic.*/
             z-index: 21;
         }