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:
@@ -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}…`}
|
||||
|
||||
Reference in New Issue
Block a user