From 656a2dcbd82b0ba01eaf536322bfd3c4cede5871 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 8 May 2025 01:41:05 +0800
Subject: [PATCH] Fix horizontal scrolling in table editor when no rows present
 (#35526)

---
 .../studio/components/grid/components/grid/Grid.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index 3fa50b0992e..a5bd0bdf0b8 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, memo, useRef } from 'react'
+import { forwardRef, memo, Ref, useRef } from 'react'
 import DataGrid, { CalculatedColumn, DataGridHandle } from 'react-data-grid'
 
 import { handleCopyCell } from 'components/grid/SupabaseGrid.utils'
@@ -48,7 +48,7 @@ export const Grid = memo(
         filters,
         onApplyFilters,
       },
-      ref: React.Ref<DataGridHandle> | undefined
+      ref: Ref<DataGridHandle> | undefined
     ) => {
       const tableEditorSnap = useTableEditorStateSnapshot()
       const snap = useTableEditorTableStateSnapshot()
@@ -119,7 +119,7 @@ export const Grid = memo(
           {(rows ?? []).length === 0 && (
             <div
               style={{ height: `calc(100% - 35px)` }}
-              className="absolute top-9 z-[2] p-2 w-full"
+              className="absolute top-9 p-2 w-full z-[1] pointer-events-none"
             >
               {isLoading && <GenericSkeletonLoader />}
               {isError && (
@@ -144,6 +144,7 @@ export const Grid = memo(
                         {
                           <Button
                             type="default"
+                            className="pointer-events-auto"
                             onClick={() => {
                               tableEditorSnap.onImportData()
                               sendEvent({
@@ -167,7 +168,11 @@ export const Grid = memo(
                         The filters applied have returned no results from this table
                       </p>
                       <div className="flex items-center space-x-2 mt-4">
-                        <Button type="default" onClick={() => removeAllFilters()}>
+                        <Button
+                          type="default"
+                          className="pointer-events-auto"
+                          onClick={() => removeAllFilters()}
+                        >
                           Remove all filters
                         </Button>
                       </div>