From cbd2901a47d7ff69a2929d2ed78d96fd0a8ff8b4 Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Mon, 6 Apr 2026 10:14:31 -0600
Subject: [PATCH] fix(studio): fix double scrollbar and Firefox rendering in
 QueryBlock results

Make the results container a flex-col so the DataGrid sizes via flex layout
instead of height: 100%. This fixes Firefox (flex resolves sizes independent
of percentage-height rules) and eliminates the double scrollbar (removed
overflow-auto from parent, DataGrid's built-in overflow handles scrolling).
Added min-h-0 on DataGrid so it can shrink below its default 350px.
---
 .../components/interfaces/SQLEditor/UtilityPanel/Results.tsx    | 2 +-
 apps/studio/components/ui/QueryBlock/QueryBlock.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
index bfcf39ef9cd..939e806f454 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
@@ -134,7 +134,7 @@ const Results = ({ rows }: { rows: readonly any[] }) => {
           <DataGrid
             columns={columns}
             rows={rows}
-            className="flex-grow border-t-0"
+            className="flex-grow min-h-0 border-t-0"
             rowClass={() => '[&>.rdg-cell]:items-center'}
             onSelectedCellChange={setCellPosition}
             onCellKeyDown={handleCopyCell}
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
index 72c5d52ecbf..f1f9fa09ae2 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
@@ -342,7 +342,7 @@ export const QueryBlock = ({
             </div>
           ) : (
             results && (
-              <div className={cn('flex-1 w-full overflow-auto relative max-h-64')}>
+              <div className={cn('flex flex-col flex-1 w-full relative max-h-64')}>
                 <Results rows={results} />
               </div>
             )