From 7694bc68ad26ad0c8313a4978a6463fcab711204 Mon Sep 17 00:00:00 2001
From: Eugene <eugene@shiptime.com>
Date: Sat, 13 Jun 2026 14:52:08 -0400
Subject: [PATCH] fix: keep query editor toolbar visible with large queries
 (#173)

The QueryEditor root had no height constraint, so a tall query grew the
editor past its fixed-height parent. Focusing the textarea near the bottom
then scrolled the overflow:hidden parent to reveal the caret, dragging the
Run/Explain/Format toolbar out of view.

Constrain the root with `flex: 1; min-height: 0` so the editor fills its
parent and the textarea scrolls internally (via its existing overflowY:auto)
while the toolbar stays pinned. Sync the line-number gutter's scrollTop to
the textarea so line numbers stay aligned now that the textarea scrolls on
its own instead of the whole editor moving as a unit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/QueryEditor.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 2aa660d..62480f4 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -86,6 +86,7 @@ export function QueryEditor({
 }: QueryEditorProps) {
   const isMql = queryMode === 'mql';
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const lineNumsRef = useRef<HTMLDivElement>(null);
 
   const [historyOpen, setHistoryOpen] = useState(false);
   const historyAnchorRef = useRef<HTMLDivElement>(null);
@@ -492,7 +493,7 @@ export function QueryEditor({
   };
 
   const s = {
-    root: { display: 'flex', flexDirection: 'column', background: t.bgSurface, borderBottom: `1px solid ${t.border}` } as CSSProperties,
+    root: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: t.bgSurface, borderBottom: `1px solid ${t.border}` } as CSSProperties,
     toolbar: { display: 'flex', alignItems: 'center', gap: 2, padding: '5px 10px', borderBottom: `1px solid ${t.border}`, flexShrink: 0, background: t.bgToolbar } as CSSProperties,
     runBtn: { display: 'flex', alignItems: 'center', gap: 6, height: 28, padding: '0 12px', background: t.accent, color: t.textInverse, border: 'none', borderRadius: 5, fontSize: 12, fontWeight: 600, fontFamily: '"IBM Plex Sans", sans-serif', cursor: 'pointer' } as CSSProperties,
     explainBtn: { display: 'flex', alignItems: 'center', gap: 6, height: 28, padding: '0 10px', background: t.bgElevated, color: t.textPrimary, border: `1px solid ${t.border}`, borderRadius: 5, fontSize: 12, fontWeight: 500, fontFamily: '"IBM Plex Sans", sans-serif', cursor: 'pointer' } as CSSProperties,
@@ -908,7 +909,7 @@ export function QueryEditor({
         </div>
       )}
       <div style={{ ...s.editorWrap, position: 'relative' }}>
-        <div style={s.lineNums} aria-hidden="true">
+        <div ref={lineNumsRef} style={s.lineNums} aria-hidden="true">
           {value.split('\n').map((_, i) => (
             <div key={i} style={s.lineNum}>{i + 1}</div>
           ))}
@@ -932,6 +933,11 @@ export function QueryEditor({
             }
           }}
           onMouseDown={() => { if (suggestions) setSuggestions(null); }}
+          onScroll={e => {
+            // Keep the line-number gutter aligned with the textarea now that
+            // the textarea scrolls internally instead of the whole editor.
+            if (lineNumsRef.current) lineNumsRef.current.scrollTop = e.currentTarget.scrollTop;
+          }}
           onBlur={() => {
             // Defer so a click on the popup row (which calls acceptSuggestion)
             // gets a chance to run before we tear the popup down on blur.