Fixed the layout scrolling issues

This commit is contained in:
Matt Aitken
2025-12-18 14:25:32 +00:00
parent 1f3bb8b968
commit 1d58b0c29b
2 changed files with 19 additions and 21 deletions
@@ -186,7 +186,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
}}
/>
{showButtons && (
<div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-950/80 p-0.5">
<div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-900/80 p-0.5">
{additionalActions && additionalActions}
{showClearButton && (
<Button
@@ -165,9 +165,9 @@ export default function Page() {
<PageTitle title="Query" />
</NavBar>
<PageBody scrollable={false}>
<div className="grid grid-rows-[1fr_auto]">
<div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
{/* Query editor */}
<div className="flex h-full flex-col gap-2 pb-2">
<div className="flex flex-col gap-2 pb-2">
<TSQLEditor
defaultValue={query}
onChange={setQuery}
@@ -211,28 +211,26 @@ export default function Page() {
</Form>
</div>
{/* Results */}
<div className="grid h-full min-h-0 flex-1 grid-rows-[2.5rem_1fr] flex-col gap-2 border-t border-grid-dimmed pt-1">
<div className="px-3">
<div className="grid max-h-full grid-rows-[2rem_1fr] gap-2 overflow-hidden border-t border-grid-dimmed pt-1">
<div className="border-b border-grid-dimmed bg-charcoal-900 px-3">
<Header2>
{results?.rows?.length ? `${results.rows.length} Results` : "Results"}
</Header2>
</div>
<div className="min-h-0 flex-1 overflow-auto rounded-lg border border-grid-dimmed bg-charcoal-900">
{isLoading ? (
<div className="flex items-center gap-2 p-4 text-text-dimmed">
<Spinner className="size-4" />
<span>Executing query...</span>
</div>
) : results?.error ? (
<pre className="whitespace-pre-wrap p-4 text-sm text-red-400">{results.error}</pre>
) : results?.rows && results?.columns ? (
<TSQLResultsTable rows={results.rows} columns={results.columns} />
) : (
<Paragraph variant="small" className="p-4 text-text-dimmed">
Run a query to see results here.
</Paragraph>
)}
</div>
{isLoading ? (
<div className="flex items-center gap-2 p-4 text-text-dimmed">
<Spinner className="size-4" />
<span>Executing query...</span>
</div>
) : results?.error ? (
<pre className="whitespace-pre-wrap p-4 text-sm text-red-400">{results.error}</pre>
) : results?.rows && results?.columns ? (
<TSQLResultsTable rows={results.rows} columns={results.columns} />
) : (
<Paragraph variant="small" className="p-4 text-text-dimmed">
Run a query to see results here.
</Paragraph>
)}
</div>
</div>
</PageBody>