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

.changeset/multiline-search-bar-always-visible.md

@@ -0,0 +1,17 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: keep a multi-line query visible when the field is not focused
+
+Multi-line SQL fields collapsed to a single line whenever they lost focus, so everything past the first line was hidden until you clicked back into them. Focusing one expanded it into a floating overlay that covered the content underneath — and in a container sized to its content, that overlay left the layout flow and shrank the field to a sliver one character wide.
+
+Any field that allows multiple lines now simply sizes to its content, focused or not, growing the layout rather than floating over it, up to 150px before it scrolls. That covers the search WHERE, SELECT and ORDER BY, the chart editor's SQL fields, and PromQL. Lucene search fields similarly grow up to four lines. Fields with `allowMultiline={false}` remain single-line in both SQL and Lucene. The focus overlay is gone rather than made optional, so there is no longer a separate expand-on-focus state to reason about.
+
+The language switch beside the search bar stretches to match, with no divider between it and the input. A Lucene bar at the default size also no longer overhangs that switch. The Lucene input reserved a 38px row while drawing a 36px box inside it, so the switch — sized to the 36px the SQL editor uses — stood 2px proud of the input. Both languages now take their height from one shared table, so the seam is flush and the bar does not change height when you switch. Only the default size was affected; the compact bar was already consistent at 30px.
+
+Toolbar controls beside a growing search bar stay aligned with its first line (date picker, live tail, Run, and the Kubernetes filter row). Focus now recolors the whole control, including the language switch, without overriding an error or warning border.
+
+The bar also drops its `WHERE` label. It repeated what the placeholder already says — "SQL WHERE clause (ex. column = 'foo')" — while taking horizontal room the query itself can use, which matters more now that a long query wraps rather than being cut off. Most places that embed this input already hid the label and labelled it themselves from the outside, so the option to show it is gone rather than merely defaulted off.
+
+The `/` keycap that sat inside the bar is gone too. `/` and `s` still focus the input; only the overlay is removed so a long query is not clipped by a hint that is already documented in the keyboard shortcuts modal.

.claude/skills/page-layout/SKILL.md

@@ -40,5 +40,5 @@ import { PageLayout } from '@/components/PageLayout';
 | List page | `AlertsPage.tsx` | `PageHeader` + `title` + `Container` (no inputs in header) |
 | Tool page with inputs + hierarchy | `KubernetesDashboardPage.tsx`, `ClickhousePage.tsx` | `PageLayout` **without** `title`; **`breadcrumbs`** + `leading` + `actions` in one sticky header |
 | Tool page (top-level) | `DBServiceMapPage.tsx` | `PageLayout` **without** `title`; `leading` / `actions` only; no duplicate breadcrumb unless you add a real hierarchy |
-| Custom toolbar | `SessionsPage.tsx` | `PageLayout` + `header` = custom `PageHeader` `children` (single-row inputs, no `title`) |
+| Custom toolbar | `SessionsPage.tsx` | `PageLayout` + `header` = custom `PageHeader` `children` with `growing` (single-row inputs, no `title`) |
 | Custom title | `TeamPage.tsx` | `PageHeader` with `children` only |

agent_docs/page_layout.md

@@ -35,8 +35,9 @@ Both live next to `withAppNav` in `packages/app/src/layout.tsx`, which wraps pag
 | `leading` | Left cluster: source picker, badges, or other controls. When inputs are present, **do not** pair with `title` for the same page name. |
 | `actions` | Right-aligned cluster: time range, Run/Save, sampling, refresh. |
 | `children` | Full custom header when slots are not enough. Do not combine with `title` / `leading` / `actions` / `breadcrumbs` unless you use the breadcrumbs-only branch. |
+| `growing` | Opt in to block padding that only shows once the toolbar outgrows `min-height`. Sessions uses this for its multi-line search; title-only pages omit it. |
 
-Header styling is defined in `PageHeader.module.scss`: sticky top, bottom border, horizontal padding `var(--mantine-spacing-sm)` (same as Search `px="sm"`). Single-row headers keep `min-height: 60px`; stacked header (breadcrumbs + toolbar) grows with content.
+Header styling is defined in `PageHeader.module.scss`: sticky top, bottom border, horizontal padding `var(--mantine-spacing-sm)` (same as Search `px="sm"`). Single-row headers keep `min-height: 60px`; stacked header (breadcrumbs + toolbar) grows with content. Pass `growing` when the toolbar can outgrow that min-height (Sessions' multi-line search) so block padding appears only once the row is taller than the bar.
 
 ## PageLayout API
 

packages/app/src/DBDashboardPage.tsx

@@ -3117,7 +3117,6 @@ function DBDashboardPage({
         onLanguageChange={(lang: 'sql' | 'lucene') =>
           setValue('whereLanguage', lang)
         }
-        label="WHERE"
         enableHotkey
         allowMultiline
         minWidth={300}

packages/app/src/DBSearchPage.tsx

@@ -2369,7 +2369,8 @@ export function DBSearchPage() {
           <Flex
             gap="sm"
             style={{ flex: '0 1 500px', minWidth: 0 }}
-            align="center"
+            // Stays level with the search bar's first line as it grows
+            align="flex-start"
           >
             <TimePicker
               data-testid="time-picker"

packages/app/src/ServicesDashboardPage/ServicesDashboardPage.tsx

@@ -342,7 +342,14 @@ function ServicesDashboardPage() {
         }}
       >
         <Group gap="xs">
-          <Group justify="space-between" gap="xs" wrap="nowrap" flex={1}>
+          <Group
+            justify="space-between"
+            gap="xs"
+            wrap="nowrap"
+            flex={1}
+            // Stays level with the search bar's first line as it grows
+            align="flex-start"
+          >
             <SourceSelectControlled
               control={control}
               name="source"

packages/app/src/SessionSubpanel.tsx

@@ -463,7 +463,6 @@ export default function SessionSubpanel({
               control={control}
               name="where"
               size="xs"
-              showLabel={false}
               enableHotkey
               onSubmit={handleSubmit(handleWhereSubmit)}
               onLanguageChange={onLanguageChange}

packages/app/src/SessionsPage.tsx

@@ -434,12 +434,14 @@ function SessionsPage() {
         <PageLayout
           data-testid="sessions-page"
           header={
-            <PageHeader>
+            <PageHeader growing>
               <Group
                 justify="space-between"
                 gap="xs"
                 wrap="nowrap"
                 w="100%"
+                // Stays level with the search bar's first line as it grows
+                align="flex-start"
                 className={styles.toolbar}
               >
                 <SourceSelectControlled

packages/app/src/components/DBEditTimeChartForm/ChartActionBar.tsx

@@ -18,6 +18,7 @@ import {
 } from '@tabler/icons-react';
 
 import { ChartEditorFormState } from '@/components/ChartEditor/types';
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 import { TimePicker } from '@/components/TimePicker';
 import { IS_LOCAL_MODE } from '@/config';
@@ -154,9 +155,11 @@ export function ChartActionBar({
           </Button>
         )}
       </Flex>
-      <Flex gap="sm" mb="sm" align="center" justify="end">
+      <Flex gap="sm" mb="sm" align="flex-start" justify="end">
         {filtersToggle != null && tabQueriesData(activeTab) && (
-          <DashboardFiltersToggle {...filtersToggle} />
+          <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
+            <DashboardFiltersToggle {...filtersToggle} />
+          </Flex>
         )}
         {(activeTab === 'table' ||
           activeTab === 'pie' ||

packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx

@@ -34,6 +34,7 @@ import {
   isFormulaDisplayType,
   isFormulaSourceKind,
 } from '@/components/ChartEditor/utils';
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import MVOptimizationIndicator from '@/components/MaterializedViews/MVOptimizationIndicator';
 import SearchWhereInput from '@/components/SearchInput/SearchWhereInput';
 import SourceSchemaPreview, {
@@ -269,7 +270,6 @@ export function ChartEditorControls({
             onLanguageChange={(lang: 'sql' | 'lucene') =>
               setValue('whereLanguage', lang)
             }
-            showLabel={false}
             enableVariables
           />
         </Flex>
@@ -325,13 +325,15 @@ export function ChartEditorControls({
             <>
               <Divider mt="md" mb="sm" />
               <div
-                className="gap-2 align-items-center"
+                className="gap-2"
                 style={{
                   display: 'grid',
                   gridTemplateColumns: 'auto minmax(0, 1fr)',
+                  // Labels stay level with each editor's first line as it grows
+                  alignItems: 'start',
                 }}
               >
-                <div>
+                <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
                   <Text
                     me="sm"
                     size="sm"
@@ -341,7 +343,7 @@ export function ChartEditorControls({
                   >
                     Group By
                   </Text>
-                </div>
+                </Flex>
                 <div>
                   <SQLInlineEditorControlled
                     {...groupByConnectionProps}
@@ -355,7 +357,7 @@ export function ChartEditorControls({
                 </div>
                 {displayType === DisplayType.Table && (
                   <>
-                    <div>
+                    <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
                       <Text
                         me="sm"
                         size="sm"
@@ -365,7 +367,7 @@ export function ChartEditorControls({
                       >
                         Having
                       </Text>
-                    </div>
+                    </Flex>
                     <div>
                       <SQLInlineEditorControlled
                         tableConnection={tableConnection}
@@ -560,7 +562,6 @@ export function ChartEditorControls({
             onLanguageChange={(lang: 'sql' | 'lucene') =>
               setValue('whereLanguage', lang)
             }
-            showLabel={false}
             enableVariables
           />
         </Flex>

packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx

@@ -45,6 +45,7 @@ import {
   SavedChartConfigWithSelectArray,
 } from '@/components/ChartEditor/types';
 import { isFormulaSourceKind } from '@/components/ChartEditor/utils';
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import {
   CheckBoxControlled,
   TextInputControlled,
@@ -511,15 +512,19 @@ export function ChartSeriesEditor({
         )}
         {(showWhere || showGroupBy || showHaving) && (
           <div
-            className="flex-grow-1 gap-2 align-items-center"
+            className="flex-grow-1 gap-2"
             style={{
               display: 'grid',
               gridTemplateColumns: 'auto 1fr auto 1fr',
+              // Labels stay level with each editor's first line as it grows
+              alignItems: 'start',
             }}
           >
             {showWhere && (
               <>
-                <Text size="sm">Where</Text>
+                <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
+                  <Text size="sm">Where</Text>
+                </Flex>
                 <div
                   style={{
                     gridColumn:
@@ -533,7 +538,6 @@ export function ChartSeriesEditor({
                     control={control}
                     name={`${namePrefix}aggCondition`}
                     onSubmit={onSubmit}
-                    showLabel={false}
                     additionalSuggestions={attributeSuggestions}
                     data-testid="series-where-input"
                     enableVariables
@@ -543,9 +547,11 @@ export function ChartSeriesEditor({
             )}
             {showGroupBy && (
               <>
-                <Text size="sm" style={{ whiteSpace: 'nowrap' }}>
-                  Group By
-                </Text>
+                <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
+                  <Text size="sm" style={{ whiteSpace: 'nowrap' }}>
+                    Group By
+                  </Text>
+                </Flex>
                 <div
                   style={{
                     minWidth: 200,
@@ -567,9 +573,11 @@ export function ChartSeriesEditor({
                 </div>
                 {showHaving && (
                   <>
-                    <Text size="sm" style={{ whiteSpace: 'nowrap' }}>
-                      Having
-                    </Text>
+                    <Flex h={EDITOR_INPUT_HEIGHTS.sm} align="center">
+                      <Text size="sm" style={{ whiteSpace: 'nowrap' }}>
+                        Having
+                      </Text>
+                    </Flex>
                     <div style={{ minWidth: 300, maxWidth: '100%' }}>
                       <SQLInlineEditorControlled
                         tableConnection={tableConnection}

packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx

@@ -38,7 +38,6 @@ export function HeatmapSeriesEditor({
         onLanguageChange={(lang: 'sql' | 'lucene') =>
           setValue('whereLanguage', lang)
         }
-        showLabel={false}
         enableVariables
       />
       <Divider />

packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx

@@ -79,7 +79,6 @@ function SearchOnClickFields({ control }: { control: DrawerControl }) {
           name="onClick.whereTemplate"
           languageName="onClick.whereLanguage"
           allowMultiline
-          showLabel={false}
           sqlPlaceholder="ServiceName = '{{ServiceName}}'"
           lucenePlaceholder="ServiceName:{{ServiceName}}"
         />
@@ -162,7 +161,6 @@ function DashboardOnClickFields({
           name="onClick.whereTemplate"
           languageName="onClick.whereLanguage"
           allowMultiline
-          showLabel={false}
           sqlPlaceholder="ServiceName = '{{ServiceName}}'"
           lucenePlaceholder="ServiceName:{{ServiceName}}"
         />

packages/app/src/components/DBTracePanel.tsx

@@ -397,7 +397,8 @@ export default function DBTracePanel({
       {!traceId && parentSourceId != null && (
         <Stack gap="xs" mb="sm">
           <Text size="xs">Trace ID Expression</Text>
-          <Flex align="center">
+          {/* The submit button stays level with the editor's first line as it grows */}
+          <Flex align="flex-start">
             <SQLInlineEditorControlled
               tableConnection={tcFromSource(parentSourceData)}
               name="traceIdExpression"

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -1288,7 +1288,6 @@ export function DBTraceWaterfallChartContainer({
                 languageName="traceWhereLanguage"
                 control={control}
                 size="xs"
-                showLabel={false}
                 allowMultiline={false}
                 onSubmit={handleSubmit(onSubmitFilters)}
                 onLanguageChange={lang =>
@@ -1327,7 +1326,6 @@ export function DBTraceWaterfallChartContainer({
                   languageName="logWhereLanguage"
                   control={control}
                   size="xs"
-                  showLabel={false}
                   allowMultiline={false}
                   onSubmit={handleSubmit(onSubmitFilters)}
                   onLanguageChange={lang =>

packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx

@@ -181,7 +181,6 @@ export const QueryExpressionFilterEditForm = ({
           control={control}
           name="expression"
           placeholder="SQL column or expression"
-          language="sql"
           enableHotkey
           rules={{ required: true }}
           parentRef={TOOLTIP_PORTAL_TARGET}
@@ -198,7 +197,6 @@ export const QueryExpressionFilterEditForm = ({
           control={control}
           name="where"
           languageName="whereLanguage"
-          showLabel={false}
           allowMultiline={true}
           sqlPlaceholder="Filter for dropdown values"
           lucenePlaceholder="Filter for dropdown values"

packages/app/src/components/HeatmapSettingsDrawer.tsx

@@ -97,7 +97,6 @@ export default function HeatmapSettingsDrawer({
             size="xs"
             tooltipText="Controls the Y axis range and scale — defines the metric plotted vertically."
             placeholder="SQL expression"
-            language="sql"
             onSubmit={form.handleSubmit(onSubmit)}
             label="Value"
             error={form.formState.errors.value?.message}
@@ -111,7 +110,6 @@ export default function HeatmapSettingsDrawer({
             control={form.control}
             name="count"
             placeholder="SQL expression"
-            language="sql"
             size="xs"
             tooltipText="Controls the color intensity (Z axis) — shows how frequently or strongly each value occurs."
             onSubmit={form.handleSubmit(onSubmit)}

packages/app/src/components/KubernetesFilters.tsx

@@ -316,7 +316,14 @@ export const KubernetesFilters: React.FC<KubernetesFiltersProps> = ({
   };
 
   return (
-    <Group mt="md" mb="xs" wrap="wrap" gap="xxs">
+    <Group
+      mt="md"
+      mb="xs"
+      wrap="wrap"
+      gap="xxs"
+      // Stays level with the search bar's first line as it grows
+      align="flex-start"
+    >
       {K8S_FILTER_FIELDS.map(({ field, placeholder, dataTestId }) => (
         <FilterSelect
           key={field}

packages/app/src/components/PageHeader.module.scss

@@ -10,7 +10,7 @@
   justify-content: space-between;
   line-height: 1;
 
-  /* Match Search page toolbar: DBSearchPage uses Mantine `px="sm"` */
+  /* Match Search page toolbar: DBSearchPage uses Mantine `px="sm"`. */
   padding: 0 var(--mantine-spacing-sm);
   position: sticky;
   top: 0;
@@ -22,6 +22,14 @@
   z-index: 2;
 }
 
+/* A toolbar that can grow past `min-height` (Sessions' multi-line search).
+   Block padding is absorbed at rest and only shows once the row outgrows the
+   header — otherwise the query sits flush against the edges. Other pages keep
+   the zero block padding above so a title-only bar does not shift. */
+.header.growing {
+  padding-block: var(--mantine-spacing-xs);
+}
+
 /* Applied automatically when a `stickyRow` is provided: the chrome scrolls
    away with the page and the `stickyRow` below becomes the only pinned bar.
    The chrome's bottom border and bottom padding are also dropped — the