From 36af1a430dcdaafe7e23974ac63c52d5559261da Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Sun, 31 May 2026 16:28:52 +0100
Subject: [PATCH 1/3] style(search): reduce xs input height from 32px to 30px

Align the xs size across SQLInlineEditor, AutocompleteInput, and the
SearchWhereInput addon so compact search inputs share a consistent
30px height.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/SQLEditor/SQLInlineEditor.tsx       | 2 +-
 packages/app/src/components/SearchInput/AutocompleteInput.tsx   | 2 +-
 .../app/src/components/SearchInput/SearchWhereInput.module.scss | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
index 8212e3c9c1..8d7829e3e1 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
@@ -305,7 +305,7 @@ export default function SQLInlineEditor({
 
   // Only apply expanded styling when multiline is enabled and focused
   const isExpanded = allowMultiline && isFocused;
-  const baseHeight = size === 'xs' ? 32 : 36;
+  const baseHeight = size === 'xs' ? 30 : 36;
 
   return (
     <div
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index 861c019bfc..0669f30a11 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -154,7 +154,7 @@ export default function AutocompleteInput({
   }, [language, onLanguageChange, inputRef]);
 
   // Height including the 2px border from .textarea (1px top + 1px bottom)
-  const baseHeight = size === 'xs' ? 32 : size === 'lg' ? 44 : 38;
+  const baseHeight = size === 'xs' ? 30 : size === 'lg' ? 44 : 38;
 
   return (
     <div
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
index a2d3d2d849..0dcddca269 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
@@ -79,7 +79,7 @@
   background-color: var(--color-bg-field-addon);
 
   &.sizeXs {
-    height: 32px;
+    height: 30px;
   }
 
   &.sizeSm {

From 4e2f6a51226729971d49a991579a58639b28a9bd Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Sun, 31 May 2026 16:33:23 +0100
Subject: [PATCH 2/3] feat(time-picker): support xs size and apply across
 search header

Add an optional size prop ('xs' | 'sm', default 'sm') to TimePicker and
wire it through to the underlying TextInput so callers can render a
compact variant. Apply size="xs" to the DBSearchPage header (Run
button, source select, TimePicker, and live tail refresh Select) so all
controls line up at the same height.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/DBSearchPage.tsx                     | 5 ++++-
 packages/app/src/components/TimePicker/TimePicker.tsx | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 92fe91474c..4e7a6a21de 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -277,6 +277,7 @@ function SearchSubmitButton({
       type="submit"
       leftSection={<IconPlayerPlay size={16} />}
       style={{ flexShrink: 0 }}
+      size="xs"
     >
       Run
     </Button>
@@ -1982,6 +1983,7 @@ export function DBSearchPage() {
             minWidth="min(600px, 100%)"
             dateRange={searchedTimeRange}
             sourceId={inputSource}
+            size="xs"
           />
           <Flex
             gap="sm"
@@ -2001,12 +2003,13 @@ export function DBSearchPage() {
                 isLive && interval !== LIVE_TAIL_DURATION_MS
               }
               width="100%"
+              size="xs"
             />
             {isLive && (
               <Tooltip label="Live tail refresh interval">
                 <Box style={{ width: 80, minWidth: 80, flexShrink: 0 }}>
                   <Select
-                    size="sm"
+                    size="xs"
                     w="100%"
                     data={LIVE_TAIL_REFRESH_FREQUENCY_OPTIONS}
                     value={String(refreshFrequency)}
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index d61862088f..6e5002495e 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -106,6 +106,7 @@ const TimePickerComponent = ({
   isLiveMode = false,
   defaultRelativeTimeMode = false,
   width = 350,
+  size = 'sm',
 }: {
   inputValue: string;
   setInputValue: (str: string) => any;
@@ -116,6 +117,7 @@ const TimePickerComponent = ({
   isLiveMode?: boolean;
   defaultRelativeTimeMode?: boolean;
   width?: number | string;
+  size?: 'xs' | 'sm';
 }) => {
   const {
     userPreferences: { timeFormat },
@@ -278,7 +280,7 @@ const TimePickerComponent = ({
           onChange={event => onChange(event.currentTarget.value)}
           onClick={toggle}
           placeholder="Time Range"
-          size="sm"
+          size={size}
           w={width}
           onKeyDown={e => {
             if (e.key === 'Enter' && e.target instanceof HTMLInputElement) {

From f1541e192c514a1970b3d720e5d6c2aa033c328b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 1 Jun 2026 11:49:56 +0100
Subject: [PATCH 3/3] fix(search): match Lucene xs input height to SQL (30px)

The inner textarea was set to 30px while its wrapper adds a 1px border
top/bottom, rendering the Lucene where input at 32px. Drop the textarea
min-height to 28px so the wrapper outer height lands at 30px, matching
the SQL inline editor.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/SearchInput/SearchWhereInput.module.scss    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
index 0dcddca269..21674397ad 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
@@ -56,10 +56,13 @@
     }
   }
 
-  /* !important overrides the inline min-height set by react-textarea-autosize */
+  /* !important overrides the inline min-height set by react-textarea-autosize.
+     Inner textarea is 2px shorter than the wrapper because the wrapper adds
+     a 1px border top/bottom, so 28px + 2px border = 30px outer (matches the
+     SQL inline editor's xs height). */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   &.sizeXs :global(.mantine-InputWrapper-root) textarea {
-    min-height: 30px !important;
+    min-height: 28px !important;
   }
 
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */