Fixed table scrolling

Author: matt-aitken

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -942,7 +942,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   if (rows.length === 0) {
     return (
       <div
-        className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         style={{ position: "relative" }}
       >
         <table style={{ display: "grid" }}>
@@ -1027,7 +1027,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   return (
     <div
       ref={tableContainerRef}
-      className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
       style={{ position: "relative" }}
     >
       <table style={{ display: "grid" }}>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -560,8 +560,8 @@ export default function Page() {
                           </Callout>
                         )}
                         <div className="h-full bg-charcoal-900 p-2">
-                          <Card className="max-h-full overflow-hidden p-0">
-                            <Card.Content className="max-h-full overflow-hidden p-0">
+                          <Card className="h-full overflow-hidden p-0">
+                            <Card.Content className="min-h-0 flex-1 overflow-hidden p-0">
                               <TSQLResultsTable
                                 rows={results.rows}
                                 columns={results.columns}