Remove the ‘card’ style from the Query page so the sections are clearer

Author: samejr

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -142,6 +142,8 @@ export type QueryWidgetProps = {
   accessory?: ReactNode;
   isResizing?: boolean;
   isDraggable?: boolean;
+  /** Additional className applied to the Card wrapper */
+  className?: string;
   /** Callback when edit is clicked. Receives the current data. */
   onEdit?: (data: QueryWidgetData) => void;
   /** Callback when rename is clicked. Receives the new title. */
@@ -161,6 +163,7 @@ export function QueryWidget({
   error,
   isResizing,
   isDraggable,
+  className,
   onEdit,
   onRename,
   onDelete,
@@ -195,7 +198,7 @@ export function QueryWidget({
 
   return (
     <div className="group h-full">
-      <Card className="h-full overflow-hidden px-0 pb-0">
+      <Card className={cn("h-full overflow-hidden px-0 pb-0", className)}>
         <Card.Header draggable={isDraggable}>
           <div className="flex items-center gap-1.5">{title}</div>
           <Card.Accessory>

apps/webapp/app/components/query/QueryEditor.tsx

@@ -507,9 +507,7 @@ export function QueryEditor({
   const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
 
   // Stable string key of result column names (types excluded — they can vary between runs)
-  const columnNamesKey = results?.columns
-    ? results.columns.map((c) => c.name).join(",")
-    : "";
+  const columnNamesKey = results?.columns ? results.columns.map((c) => c.name).join(",") : "";
 
   // Use a ref so the effect can read chartConfig without re-firing on every config tweak
   const chartConfigRef = useRef(chartConfig);
@@ -773,7 +771,7 @@ export function QueryEditor({
                       </div>
                     ) : results?.rows && results?.columns ? (
                       <div
-                        className={`grid h-full max-h-full overflow-hidden bg-charcoal-900 ${
+                        className={`grid h-full max-h-full overflow-hidden bg-background-bright ${
                           hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
                             ? "grid-rows-[auto_1fr]"
                             : "grid-rows-[1fr]"
@@ -784,8 +782,9 @@ export function QueryEditor({
                           periodClipped={results.periodClipped}
                           organizationSlug={organization.slug}
                         />
-                        <div className="overflow-hidden p-2">
+                        <div className="overflow-hidden">
                           <QueryWidget
+                            className="border-0"
                             title={
                               <QueryTitle
                                 isTitleLoading={isTitleLoading}
@@ -829,7 +828,7 @@ export function QueryEditor({
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="graph"
-                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-background-bright ${
                       results?.rows &&
                       results.rows.length > 0 &&
                       hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
@@ -878,7 +877,7 @@ export function QueryEditor({
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="bignumber"
-                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-background-bright ${
                       results?.rows &&
                       results.rows.length > 0 &&
                       hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
@@ -1219,8 +1218,9 @@ function ResultsChart({
     <>
       <ResizablePanelGroup className="overflow-hidden">
         <ResizablePanel id="chart-results">
-          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+          <div className="h-full overflow-hidden bg-background-bright">
             <QueryWidget
+              className="border-0"
               title={
                 <QueryTitle
                   isTitleLoading={isTitleLoading}
@@ -1297,8 +1297,9 @@ function ResultsBigNumber({
     <>
       <ResizablePanelGroup className="overflow-hidden">
         <ResizablePanel id="bignumber-results">
-          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+          <div className="h-full overflow-hidden bg-background-bright">
             <QueryWidget
+              className="border-0"
               title={
                 <QueryTitle
                   isTitleLoading={isTitleLoading}