[HDX-5307] Keep multi-line query fields visible when unfocused - #3132

🔵 minor — The editor's base height is re-asserted by hand at nine call sites

<Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center"> is repeated verbatim nine times across six files (here, ChartEditorControls.tsx:336/360, ChartSeriesEditor.tsx:525/550/576, HighlightedAttributes.tsx:89/98, MaterializedViews.tsx:576, OrderByFormRow.tsx:92) to keep a label or icon level with the neighbouring editor's first line. All nine hardcode .sm while the editors next to them infer their height from size, so the two must be kept in sync by hand: adding size="xs" to the ORDER BY editor below this line would silently leave the filters toggle 6px low, with nothing to catch it. Extract one small wrapper (taking the same size the editor takes, or a class keyed off the --editor-base-height the editor already publishes) and use it at all nine sites.

Height checks miss clipped text

The new helper checks only the visible box's height. Lucene already uses maxRows={1}, so reverting the new no-wrap CSS would still pass these assertions while wrapping and hiding the rest of the query. Add an assertion that the long value does not overflow vertically, alongside the height checks, so the test detects the clipping regression it is intended to prevent.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Unnecessary custom-property cast

The new CSS custom-property entry widens its key with as string, contrary to the repository directive to avoid casts when type inference is possible. Define the custom-property styles in an inferred object and spread that object into style instead, preserving the property name without an assertion. This repository requirement must be satisfied before merging.

Context Used: AGENTS.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

🔵 minor — <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center"> is copy-pasted ten times across six files

The same "centre this control on the editor's first line" wrapper is now hand-rolled at ChartSeriesEditor.tsx:525,550,576, ChartEditorControls.tsx:336,360, ChartActionBar.tsx:160, HighlightedAttributes.tsx:89,98, MaterializedViews.tsx:576 and OrderByFormRow.tsx:92, each hard-coding the sm variant. Every one of them silently desyncs if the editor beside it is ever given size="xs" (30px), and the repo conventions make grepping for an existing component before adding a new one REQUIRED. Extract one small component next to editorInputHeights.ts (e.g. <EditorFirstLineSlot size="sm">{children}</EditorFirstLineSlot>, or a shared class keyed off --editor-base-height so it inherits the height the editor already publishes) and use it at all ten sites.

🔵 minor — align="flex-start" top-aligns the 34px ActionIcons against 36px toolbar controls

Mantine Group defaults to align="center", which was centering the two size="lg" ActionIcons (34px, lines 385 and 400) against the 36px SearchWhereInput/TimePicker/Run button. With flex-start they now sit flush to the top and 2px short at the bottom — the same 2px seam this PR removes elsewhere. KubernetesFilters.tsx:325 has the same shape (28px FilterLinkToggle ActionIcon vs 30px size="xs" selects). Wrap the shorter controls the way ChartActionBar.tsx:160 already does in this diff: <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">…</Flex> (.xs for the Kubernetes row).

🔵 minor — clauseField() label lookup isn't scoped to the search form and also matches the query-error panel

this.page.getByText(label, { exact: true }) matches page-wide, and DBSearchPage.tsx:2674 / :2683 render a second <Text>SELECT</Text> and <Text>ORDER BY</Text> inside the hasQueryError panel (itself wrapped in a Paper, so borderedBox would resolve to the wrong box). Any test run where the query errors turns the new multiline/input-focus assertions into a strict-mode violation instead of a real failure. Scope it: borderedBox(this.searchForm.getByText(label, { exact: true })).

🔵 minor — New focus test locates the editors by .cm-content index, which the PR's own helper exists to avoid

It focuses searchPage.getSELECTEditor() (.cm-content first) and getOrderByEditor() (.nth(1)) while asserting on the label-located Paper from selectClauseField()/orderByClauseField(). SearchPage.ts:366-370 documents why the index is wrong: in SQL mode the WHERE input is a CodeMirror editor and comes first — and the search page opens in SQL whenever getStoredLanguage() returns 'sql' (DBSearchPage.tsx:1235, backed by the hdx-search-where-language localStorage key). Then the test focuses the WHERE input and polls a SELECT border that never changes. Focus selectClauseField().focusTarget / orderByClauseField().focusTarget instead.

🔵 minor — The 36px label/icon row is hand-rolled nine times and duplicates FormRow's existing one

<Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center"> is added nine times across this diff (here, HighlightedAttributes.tsx:89,98, MaterializedViews.tsx:576, ChartEditorControls.tsx:336,360, ChartSeriesEditor.tsx:525,550,576, ChartActionBar.tsx:160) — and this instance sits inside a FormRow, whose label column already implements the identical pattern (FormRow.tsx:16-24: outer align="flex-start" + a height: '36px' label box). Extract one small component (e.g. EditorRowAligned) and change FormRow.tsx:23 to EDITOR_INPUT_HEIGHTS.sm, so the literal and the constant can't drift apart.