Working on fixing the Table scrolling

Author: matt-aitken

apps/webapp/app/components/primitives/charts/Card.tsx

@@ -21,8 +21,8 @@ const CardHeader = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const CardContent = ({ children }: { children: ReactNode }) => {
-  return <div className="px-2">{children}</div>;
+const CardContent = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <div className={cn("px-2", className)}>{children}</div>;
 };
 
 const CardAccessory = ({ children }: { children: ReactNode }) => {

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

@@ -559,12 +559,16 @@ export default function Page() {
                             . Specify them explicitly to include them.
                           </Callout>
                         )}
-                        <div className="min-h-0 flex-1 overflow-hidden">
-                          <TSQLResultsTable
-                            rows={results.rows}
-                            columns={results.columns}
-                            prettyFormatting={prettyFormatting}
-                          />
+                        <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">
+                              <TSQLResultsTable
+                                rows={results.rows}
+                                columns={results.columns}
+                                prettyFormatting={prettyFormatting}
+                              />
+                            </Card.Content>
+                          </Card>
                         </div>
                       </div>
                     ) : (