Skip to content

Commit 96c29f2

Browse files
matt-aitkenmatt-aitken
committed
Resizable code area
This includes making the resizable panel work for vertical splits
1 parent 3281331 commit 96c29f2

File tree

2 files changed

+46
-23
lines changed
  • apps/webapp/app
    • components/primitives
    • routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query

2 files changed

+46
-23
lines changed

‎apps/webapp/app/components/primitives/Resizable.tsx‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,40 @@ const ResizableHandle = ({
2626
}) => (
2727
<PanelResizer
2828
className={cn(
29-
"group relative flex w-0.75 items-center justify-center focus-custom after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 [&[data-panel-group-direction=vertical]>div]:rotate-90",
29+
// Base styles
30+
"group relative flex items-center justify-center focus-custom",
31+
// Horizontal orientation (default)
32+
"w-0.75 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
33+
// Vertical orientation
34+
"data-[handle-orientation=vertical]:h-0.75 data-[handle-orientation=vertical]:w-full",
35+
"data-[handle-orientation=vertical]:after:inset-x-0 data-[handle-orientation=vertical]:after:inset-y-auto",
36+
"data-[handle-orientation=vertical]:after:top-1/2 data-[handle-orientation=vertical]:after:left-0",
37+
"data-[handle-orientation=vertical]:after:h-1 data-[handle-orientation=vertical]:after:w-full",
38+
"data-[handle-orientation=vertical]:after:-translate-y-1/2 data-[handle-orientation=vertical]:after:translate-x-0",
3039
className
3140
)}
3241
size="3px"
3342
{...props}
3443
>
35-
<div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
44+
{/* Horizontal orientation line indicator */}
45+
<div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500 group-data-[handle-orientation=vertical]:hidden" />
46+
{/* Vertical orientation line indicator */}
47+
<div className="absolute left-0 top-[0.0625rem] hidden h-px w-full bg-grid-bright transition group-hover:top-0 group-hover:h-0.75 group-hover:bg-lavender-500 group-data-[handle-orientation=vertical]:block" />
3648
{withHandle && (
37-
<div className="z-10 flex h-5 w-3 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden">
38-
{Array.from({ length: 3 }).map((_, index) => (
39-
<div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
40-
))}
41-
</div>
49+
<>
50+
{/* Horizontal orientation dots (vertical arrangement) */}
51+
<div className="z-10 flex h-5 w-0.75 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:hidden">
52+
{Array.from({ length: 3 }).map((_, index) => (
53+
<div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
54+
))}
55+
</div>
56+
{/* Vertical orientation dots (horizontal arrangement) */}
57+
<div className="z-10 hidden h-0.75 w-5 flex-row items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:flex">
58+
{Array.from({ length: 3 }).map((_, index) => (
59+
<div key={index} className="h-0.75 w-[0.1875rem] rounded-full bg-charcoal-600" />
60+
))}
61+
</div>
62+
</>
4263
)}
4364
</PanelResizer>
4465
);

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -417,16 +417,15 @@ const QueryEditorForm = forwardRef<
417417
}, []);
418418

419419
return (
420-
<div className="flex flex-col gap-2 bg-charcoal-900 pb-2">
420+
<div className="flex h-full flex-col gap-2 bg-charcoal-900 pb-2">
421421
<TSQLEditor
422422
defaultValue={query}
423423
onChange={setQuery}
424424
schema={querySchemas}
425425
linterEnabled={true}
426426
showCopyButton={true}
427427
showClearButton={true}
428-
minHeight="200px"
429-
className="min-h-[200px]"
428+
className="min-h-0 flex-1"
430429
/>
431430
<fetcher.Form ref={formRef} method="post" className="flex items-center justify-between gap-2 px-2">
432431
<input type="hidden" name="query" value={query} />
@@ -584,19 +583,22 @@ export default function Page() {
584583
<PageBody scrollable={false}>
585584
<ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
586585
<ResizablePanel id="query-main" className="h-full">
587-
<div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
586+
<ResizablePanelGroup orientation="vertical" className="h-full overflow-hidden">
588587
{/* Query editor - isolated component to prevent re-renders */}
589-
<QueryEditorForm
590-
ref={editorRef}
591-
defaultQuery={initialQuery}
592-
defaultScope={initialScope}
593-
defaultTimeFilter={initialTimeFilter}
594-
history={history}
595-
fetcher={fetcher}
596-
isAdmin={isAdmin}
597-
/>
588+
<ResizablePanel id="query-editor" min="100px" default="300px" className="overflow-hidden">
589+
<QueryEditorForm
590+
ref={editorRef}
591+
defaultQuery={initialQuery}
592+
defaultScope={initialScope}
593+
defaultTimeFilter={initialTimeFilter}
594+
history={history}
595+
fetcher={fetcher}
596+
isAdmin={isAdmin}
597+
/>
598+
</ResizablePanel>
599+
<ResizableHandle id="query-editor-handle" />
598600
{/* Results */}
599-
<div className="grid max-h-full grid-rows-[1fr] overflow-hidden border-t border-grid-dimmed bg-charcoal-800">
601+
<ResizablePanel id="query-results" min="200px" className="overflow-hidden bg-charcoal-800">
600602
<ClientTabs
601603
value={resultsView}
602604
onValueChange={(v) => setResultsView(v as "table" | "graph")}
@@ -734,8 +736,8 @@ export default function Page() {
734736
)}
735737
</ClientTabsContent>
736738
</ClientTabs>
737-
</div>
738-
</div>
739+
</ResizablePanel>
740+
</ResizablePanelGroup>
739741
</ResizablePanel>
740742
<ResizableHandle id="query-handle" />
741743
<ResizablePanel

0 commit comments

Comments
 (0)