Improved the graph layout

Author: matt-aitken

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

@@ -241,7 +241,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
   return (
     <div className={cn("flex flex-col gap-2 px-3 py-2", className)}>
       {/* Chart Type */}
-      <div className="flex items-center gap-1">
+      <div className="flex flex-col gap-3">
         <ConfigField label="Type">
           <div className="flex items-center">
             <Button
@@ -286,7 +286,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
         </ConfigField>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-col gap-2">
         {/* X-Axis */}
         <ConfigField label="X-Axis">
           <Select
@@ -399,10 +399,9 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
         {/* Stacked toggle (only when grouped) */}
         {config.groupByColumn && (
-          <ConfigField label="">
+          <ConfigField label="Stack groups">
             <Switch
-              variant="small"
-              label="Stacked"
+              variant="medium"
               checked={config.stacked}
               onCheckedChange={(checked) => updateConfig({ stacked: checked })}
             />
@@ -438,7 +437,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
         {/* Sort Direction (only when sorting) */}
         {config.sortByColumn && (
-          <ConfigField label="">
+          <ConfigField label="Sort direction">
             <SortDirectionToggle
               direction={config.sortDirection}
               onChange={(direction) => updateConfig({ sortDirection: direction })}
@@ -452,7 +451,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
 function ConfigField({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col gap-1">
       {label && <span className="text-xs text-text-dimmed">{label}</span>}
       {children}
     </div>

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

@@ -457,9 +457,9 @@ export default function Page() {
         <PageTitle title={<AlphaTitle>Query</AlphaTitle>} />
       </NavBar>
       <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="max-h-full bg-charcoal-800">
-          <ResizablePanel id="query-main" className="max-h-full">
-            <div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
+        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
+          <ResizablePanel id="query-main" className="h-full">
+            <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
               {/* Query editor - isolated component to prevent re-renders */}
               <QueryEditorForm
                 ref={editorRef}
@@ -518,7 +518,7 @@ export default function Page() {
                   </ClientTabsList>
                   <ClientTabsContent value="table" className="min-h-0 overflow-y-hidden">
                     {isLoading ? (
-                      <div className="flex items-center gap-2 p-4 text-text-dimmed">
+                      <div className="flex items-center gap-2 p-4 text-sm text-text-dimmed">
                         <Spinner className="size-4" />
                         <span>Executing query...</span>
                       </div>
@@ -585,24 +585,28 @@ export default function Page() {
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="graph"
-                    className="flex min-h-0 flex-col overflow-hidden"
+                    className="grid min-h-0 grid-rows-[1fr] overflow-hidden"
                   >
                     {results?.rows && results?.columns && results.rows.length > 0 ? (
-                      <>
-                        <ChartConfigPanel
-                          columns={results.columns}
-                          config={chartConfig}
-                          onChange={handleChartConfigChange}
-                          className="shrink-0 border-b border-grid-dimmed"
-                        />
-                        <div className="min-h-0 flex-1 overflow-auto p-3">
-                          <QueryResultsChart
-                            rows={results.rows}
+                      <ResizablePanelGroup className="h-full overflow-hidden">
+                        <ResizablePanel id="chart-results">
+                          <div className="h-full bg-background-dimmed p-3">
+                            <QueryResultsChart
+                              rows={results.rows}
+                              columns={results.columns}
+                              config={chartConfig}
+                            />
+                          </div>
+                        </ResizablePanel>
+                        <ResizableHandle id="chart-split" />
+                        <ResizablePanel id="chart-config" min="50px" default="200px">
+                          <ChartConfigPanel
                             columns={results.columns}
                             config={chartConfig}
+                            onChange={handleChartConfigChange}
                           />
-                        </div>
-                      </>
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
                     ) : (
                       <Paragraph variant="small" className="p-4 text-text-dimmed">
                         Run a query to visualize results.