Resizable workbench with proper scroll and fix chat message contrast.

Workbench drag handle for SQL/agent panels; dark-theme user bubbles and input field readable.
This commit is contained in:
mo
2026-06-25 01:42:25 +00:00
parent 4ff9f5589e
commit 41a8a3b18e
6 changed files with 65 additions and 18 deletions
+5 -5
View File
@@ -144,10 +144,10 @@ export function SqlWorkbench({ engine, compact }: Props) {
</div>
</header>
<div className="flex min-h-0 flex-1">
<aside className={cn('shrink-0 border-r border-border/60 p-1.5', compact ? 'w-44' : 'w-52')}>
<div className="flex min-h-0 flex-1 overflow-hidden">
<aside className={cn('flex min-h-0 shrink-0 flex-col border-r border-border/60 p-1.5', compact ? 'w-44' : 'w-52')}>
<p className="mb-0.5 text-[8px] font-semibold uppercase tracking-wider text-foreground-faint">10 demo commands</p>
<div className="scrollbar-thin max-h-full space-y-0.5 overflow-y-auto">
<div className="scrollbar-thin min-h-0 flex-1 space-y-0.5 overflow-y-auto">
{samples.map((s) => (
<button
key={s.id}
@@ -166,8 +166,8 @@ export function SqlWorkbench({ engine, compact }: Props) {
value={sql}
onChange={(e) => setSql(e.target.value)}
className={cn(
'shrink-0 resize-none border-b border-border/60 bg-black/40 p-1.5 font-mono text-[10px] text-emerald-100 outline-none focus:ring-1 focus:ring-docker/40',
compact ? 'min-h-[40px]' : 'min-h-[56px]',
'shrink-0 resize-y border-b border-border/60 bg-[#0d1117] p-1.5 font-mono text-[10px] text-emerald-100 outline-none focus:ring-1 focus:ring-docker/40',
compact ? 'min-h-[48px] max-h-[96px]' : 'min-h-[56px] max-h-[120px]',
)}
spellCheck={false}
placeholder={`${meta.queryLabel}`}