From 97b08c17230e061429c8851f91a8a3708314334c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Sep 2026 12:04:44 +0100 Subject: [PATCH 01/19] fix: keep a multi-line search query visible when the search bar is blurred The search bar collapsed to a single line whenever it lost focus, so anything past the first line of a multi-line query was hidden until you clicked back into it. Focusing it expanded the bar into an absolutely positioned overlay that covered the results underneath. The bar now sizes to its content and stays that way, growing the row instead of overlaying it, up to four lines in Lucene and 150px in SQL before it scrolls. The language switch stretches to match so the seam between the two stays flush, and the `/` hint stays on the first line. Staying expanded is opt-in via a new `keepExpanded` prop rather than the default for every inline SQL editor: SELECT and ORDER BY sit in narrow boxes where the default value wraps, and expanding them permanently would have tripled the height of the search page header. Co-authored-by: Cursor --- .../multiline-search-bar-always-visible.md | 7 +++ .../components/PromQLEditor/PromQLEditor.tsx | 2 +- .../SQLEditor/SQLInlineEditor.module.scss | 17 ++++-- .../components/SQLEditor/SQLInlineEditor.tsx | 25 +++++--- .../SearchInput/AutocompleteInput.module.scss | 33 ++--------- .../SearchInput/AutocompleteInput.tsx | 7 ++- .../SearchInput/SearchWhereInput.module.scss | 58 +++++++++---------- .../SearchInput/SearchWhereInput.tsx | 40 +++++++------ .../e2e/features/shared/multiline.spec.ts | 40 +++++++++++-- 9 files changed, 132 insertions(+), 97 deletions(-) create mode 100644 .changeset/multiline-search-bar-always-visible.md diff --git a/.changeset/multiline-search-bar-always-visible.md b/.changeset/multiline-search-bar-always-visible.md new file mode 100644 index 0000000000..8bec3b1812 --- /dev/null +++ b/.changeset/multiline-search-bar-always-visible.md @@ -0,0 +1,7 @@ +--- +'@hyperdx/app': patch +--- + +fix: keep a multi-line search query visible when the search bar is not focused + +The search bar collapsed to a single line whenever it lost focus, so everything past the first line of a multi-line query was hidden until you clicked back into it — you could not read the query you were looking at. Focusing it then expanded the bar into a floating overlay that covered the results underneath. It now sizes to its content and stays that way, growing the row instead of overlaying it, up to four lines in Lucene and 150px in SQL before it scrolls. The language switch beside it stretches to match and the `/` hint stays on the first line. Narrow fields that are not the query bar, such as SELECT and ORDER BY, still collapse on blur, since their values wrap and would otherwise permanently take the space. diff --git a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx index 453769e1fc..4f214b9717 100644 --- a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx +++ b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx @@ -215,7 +215,7 @@ export default function PromQLEditor({ styles.paper, variableIssues.errors.length > 0 ? styles.error : undefined, isVariableWarningOnly ? styles.warning : undefined, - isExpanded ? styles.expanded : undefined, + isExpanded ? cx(styles.expanded, styles.overlay) : undefined, !isExpanded ? styles.collapseFade : undefined, )} ps="4px" diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss index 568228b895..86c1997f37 100644 --- a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss +++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss @@ -26,7 +26,9 @@ border-color: var(--color-bg-warning); } - &.expanded { + /* Floats over whatever is below so expanding on focus doesn't shift the page. + Only for an editor that collapses again on blur. */ + &.overlay { position: absolute; top: 0; left: 0; @@ -41,6 +43,12 @@ max-height: var(--editor-base-height, 36px); overflow: hidden; } + + /* An editor that keeps its height can't change border width on focus without + nudging everything below it, so recolor instead. */ + &.expanded:not(.overlay).focused { + border-color: var(--color-bg-brand); + } } .label { @@ -71,10 +79,11 @@ } } +/* Pinned to the first line so it stays put as the editor grows. */ .languageSwitchWrapper { display: flex; align-items: center; - min-height: 100%; + min-height: var(--editor-base-height, 36px); } /* Fade at the bottom when allowMultiline and collapsed (single-line) so text doesn't appear hard-cut */ @@ -88,7 +97,3 @@ background: linear-gradient(to bottom, transparent, var(--color-bg-field)); pointer-events: none; } - -.expanded { - /* Expanded state: no fade, full height */ -} diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx index 5ebe042be5..99c4fad1da 100644 --- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx +++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx @@ -68,6 +68,13 @@ type SQLInlineEditorProps = { queryHistoryType?: string; parentRef?: HTMLElement | null; allowMultiline?: boolean; + /** + * Keep every line of the expression on screen instead of collapsing back to + * the first one on blur. For a query bar, where the expression is the thing + * being read; a narrow field like ORDER BY is better off collapsing, since + * its value wraps and would permanently take the space. + */ + keepExpanded?: boolean; dateRange?: [Date, Date]; sourceId?: string; // With multiple tableConnections, offer only fields present in ALL of them @@ -101,6 +108,7 @@ export default function SQLInlineEditor({ queryHistoryType, parentRef, allowMultiline = true, + keepExpanded = false, dateRange, sourceId, intersectFields, @@ -337,8 +345,10 @@ export default function SQLInlineEditor({ } }, []); - // Only apply expanded styling when multiline is enabled and focused - const isExpanded = allowMultiline && isFocused; + const isExpanded = allowMultiline && (keepExpanded || isFocused); + // Expanding only for as long as focus lasts floats over the content below; + // staying expanded has to occupy real space instead. + const isOverlay = isExpanded && !keepExpanded; const isVariableWarningOnly = variableIssues.errors.length === 0 && variableIssues.warnings.length > 0; @@ -348,10 +358,10 @@ export default function SQLInlineEditor({
- {/* When expanded, Paper is absolute; this keeps the wrapper width stable */} - {isExpanded &&