From 1d58b0c29bad40a2f355fb8c2b9c80966bc8d451 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 18 Dec 2025 14:25:32 +0000
Subject: [PATCH] Fixed the layout scrolling issues

---
 .../webapp/app/components/code/TSQLEditor.tsx |  2 +-
 .../route.tsx                                 | 38 +++++++++----------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLEditor.tsx b/apps/webapp/app/components/code/TSQLEditor.tsx
index 9298fc6b6..5c3849772 100644
--- a/apps/webapp/app/components/code/TSQLEditor.tsx
+++ b/apps/webapp/app/components/code/TSQLEditor.tsx
@@ -186,7 +186,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
         }}
       />
       {showButtons && (
-        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-950/80 p-0.5">
+        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-900/80 p-0.5">
           {additionalActions && additionalActions}
           {showClearButton && (
             <Button
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 5445a8e37..3fb7c64ef 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -165,9 +165,9 @@ export default function Page() {
         <PageTitle title="Query" />
       </NavBar>
       <PageBody scrollable={false}>
-        <div className="grid grid-rows-[1fr_auto]">
+        <div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
           {/* Query editor */}
-          <div className="flex h-full flex-col gap-2 pb-2">
+          <div className="flex flex-col gap-2 pb-2">
             <TSQLEditor
               defaultValue={query}
               onChange={setQuery}
@@ -211,28 +211,26 @@ export default function Page() {
             </Form>
           </div>
           {/* Results */}
-          <div className="grid h-full min-h-0 flex-1 grid-rows-[2.5rem_1fr] flex-col gap-2 border-t border-grid-dimmed pt-1">
-            <div className="px-3">
+          <div className="grid max-h-full grid-rows-[2rem_1fr] gap-2 overflow-hidden border-t border-grid-dimmed pt-1">
+            <div className="border-b border-grid-dimmed bg-charcoal-900 px-3">
               <Header2>
                 {results?.rows?.length ? `${results.rows.length} Results` : "Results"}
               </Header2>
             </div>
-            <div className="min-h-0 flex-1 overflow-auto rounded-lg border border-grid-dimmed bg-charcoal-900">
-              {isLoading ? (
-                <div className="flex items-center gap-2 p-4 text-text-dimmed">
-                  <Spinner className="size-4" />
-                  <span>Executing query...</span>
-                </div>
-              ) : results?.error ? (
-                <pre className="whitespace-pre-wrap p-4 text-sm text-red-400">{results.error}</pre>
-              ) : results?.rows && results?.columns ? (
-                <TSQLResultsTable rows={results.rows} columns={results.columns} />
-              ) : (
-                <Paragraph variant="small" className="p-4 text-text-dimmed">
-                  Run a query to see results here.
-                </Paragraph>
-              )}
-            </div>
+            {isLoading ? (
+              <div className="flex items-center gap-2 p-4 text-text-dimmed">
+                <Spinner className="size-4" />
+                <span>Executing query...</span>
+              </div>
+            ) : results?.error ? (
+              <pre className="whitespace-pre-wrap p-4 text-sm text-red-400">{results.error}</pre>
+            ) : results?.rows && results?.columns ? (
+              <TSQLResultsTable rows={results.rows} columns={results.columns} />
+            ) : (
+              <Paragraph variant="small" className="p-4 text-text-dimmed">
+                Run a query to see results here.
+              </Paragraph>
+            )}
           </div>
         </div>
       </PageBody>