fix: allow search where input to expand full width on smaller screens (#2037)

## Summary

On smaller screens (e.g. half MacBook screen), the search WHERE input on the search page was shrinking to be unusably small. This happened because the WHERE input (`flex: 1 1 0%`, `min-width: 0`) competed with fixed-width siblings — the TimePicker (`w={350}`), optional live-tail interval select (80px, `flexShrink: 0`), and submit button (`flexShrink: 0`) — inside a non-wrapping flex row.

**Fix:**

`DBSearchPage.tsx`:
- Added `wrap="wrap"` to the outer flex container so items can flow to the next line when space is insufficient
- Set `minWidth="min(600px, 100%)"` on `SearchWhereInput` so it wraps to full width at 600px, while capping at 100% on very narrow viewports to prevent horizontal overflow
- Grouped TimePicker, live tail select, and Run button in a flexible inner `Flex` (`flex: 0 1 500px`, `minWidth: 0`) so they wrap together and can shrink to fit
- TimePicker sits in a `Box` with `minWidth: 100` so it compresses on narrow screens while live tail select and Run button keep their fixed sizes

`TimePicker.tsx`:
- Added `width` prop (defaults to `350` for backward compatibility) so the search page can pass `width="100%"` to make TimePicker fill its flexible container

`SearchPage.ts` (E2E page object):
- Fixed flaky tests by pressing Escape after filling the search input to dismiss the autocomplete suggestions dropdown before clicking the submit button

**Behavior:**
- **Wide screens**: WHERE input and controls share a row as before, TimePicker stays at 350px
- **Narrow screens**: WHERE input takes full width on its own row; TimePicker compresses to fit alongside live tail select and Run button without overflow
- **Very narrow screens (<600px viewport)**: Everything still fits without horizontal overflow

### How to test locally or on Vercel

1. Navigate to the Search page (`/search`)
2. Resize the browser window to be narrow (e.g. half of a MacBook screen, ~700px wide)
3. Verify the WHERE input expands to full width on its own row
4. Verify TimePicker, live tail select, and Run button all fit on the second row without horizontal overflow
5. Resize even narrower and verify TimePicker compresses while the Run button remains visible
6. At wider widths, verify the WHERE input and controls remain on the same row as before

### References

- Linear Issue: HDX-3903



Linear Issue: [HDX-3903](https://linear.app/clickhouse/issue/HDX-3903/on-smaller-screens-on-the-search-page-the-search-where-input-shrinks)

<div><a href="https://cursor.com/agents/bc-dbc6584f-4844-40c4-9649-66a94ef7b017"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-dbc6584f-4844-40c4-9649-66a94ef7b017"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>



Co-authored-by: Cursor Agent <199161495+cursoragent@users.noreply.github.com>

Author: MikeShi42

packages/app/src/DBSearchPage.tsx

@@ -1725,7 +1725,7 @@ function DBSearchPage() {
           onClose={setNewSourceModalClosed}
           onCreate={onNewSourceCreate}
         />
-        <Flex gap="sm" mt="sm" px="sm">
+        <Flex gap="sm" mt="sm" px="sm" wrap="wrap">
           <SearchWhereInput
             tableConnection={inputSourceTableConnection}
             control={control}
@@ -1735,41 +1735,49 @@ function DBSearchPage() {
             luceneQueryHistoryType={QUERY_LOCAL_STORAGE.SEARCH_LUCENE}
             enableHotkey
             data-testid="search-input"
+            minWidth="min(600px, 100%)"
           />
-          <TimePicker
-            data-testid="time-picker"
-            inputValue={displayedTimeInputValue}
-            setInputValue={setDisplayedTimeInputValue}
-            onSearch={onTimePickerSearch}
-            onRelativeSearch={onTimePickerRelativeSearch}
-            showLive={analysisMode === 'results'}
-            isLiveMode={isLive}
-            // Default to relative time mode if the user has made changes to interval and reloaded.
-            defaultRelativeTimeMode={
-              isLive && interval !== LIVE_TAIL_DURATION_MS
-            }
-          />
-          {isLive && (
-            <Tooltip label="Live tail refresh interval">
-              <Box style={{ width: 80, minWidth: 80, flexShrink: 0 }}>
-                <Select
-                  size="sm"
-                  w="100%"
-                  data={LIVE_TAIL_REFRESH_FREQUENCY_OPTIONS}
-                  value={String(refreshFrequency)}
-                  onChange={value =>
-                    setRefreshFrequency(value ? parseInt(value, 10) : null)
-                  }
-                  allowDeselect={false}
-                  comboboxProps={{
-                    withinPortal: true,
-                    zIndex: 1000,
-                  }}
-                />
-              </Box>
-            </Tooltip>
-          )}
-          <SearchSubmitButton isFormStateDirty={formState.isDirty} />
+          <Flex
+            gap="sm"
+            style={{ flex: '0 1 500px', minWidth: 0 }}
+            align="center"
+          >
+            <TimePicker
+              data-testid="time-picker"
+              inputValue={displayedTimeInputValue}
+              setInputValue={setDisplayedTimeInputValue}
+              onSearch={onTimePickerSearch}
+              onRelativeSearch={onTimePickerRelativeSearch}
+              showLive={analysisMode === 'results'}
+              isLiveMode={isLive}
+              // Default to relative time mode if the user has made changes to interval and reloaded.
+              defaultRelativeTimeMode={
+                isLive && interval !== LIVE_TAIL_DURATION_MS
+              }
+              width="100%"
+            />
+            {isLive && (
+              <Tooltip label="Live tail refresh interval">
+                <Box style={{ width: 80, minWidth: 80, flexShrink: 0 }}>
+                  <Select
+                    size="sm"
+                    w="100%"
+                    data={LIVE_TAIL_REFRESH_FREQUENCY_OPTIONS}
+                    value={String(refreshFrequency)}
+                    onChange={value =>
+                      setRefreshFrequency(value ? parseInt(value, 10) : null)
+                    }
+                    allowDeselect={false}
+                    comboboxProps={{
+                      withinPortal: true,
+                      zIndex: 1000,
+                    }}
+                  />
+                </Box>
+              </Tooltip>
+            )}
+            <SearchSubmitButton isFormStateDirty={formState.isDirty} />
+          </Flex>
         </Flex>
       </form>
       {searchedConfig != null && searchedSource != null && (

packages/app/src/components/TimePicker/TimePicker.tsx

@@ -78,6 +78,7 @@ const TimePickerComponent = ({
   showLive = false,
   isLiveMode = false,
   defaultRelativeTimeMode = false,
+  width = 350,
 }: {
   inputValue: string;
   setInputValue: (str: string) => any;
@@ -87,6 +88,7 @@ const TimePickerComponent = ({
   showLive?: boolean;
   isLiveMode?: boolean;
   defaultRelativeTimeMode?: boolean;
+  width?: number | string;
 }) => {
   const {
     userPreferences: { timeFormat },
@@ -248,7 +250,7 @@ const TimePickerComponent = ({
           onClick={toggle}
           placeholder="Time Range"
           size="sm"
-          w={350}
+          w={width}
           onKeyDown={e => {
             if (e.key === 'Enter' && e.target instanceof HTMLInputElement) {
               onSubmit?.(e.target.value);

packages/app/tests/e2e/components/TimePickerComponent.ts

@@ -70,6 +70,7 @@ export class TimePickerComponent {
     const isOpen = await this.pickerPopover.isVisible();
     if (isOpen) return;
     await this.page.waitForLoadState('networkidle');
+    await this.page.keyboard.press('Escape');
     await this.pickerInput.click();
     await this.pickerPopover.waitFor({ state: 'visible', timeout: 5000 });
   }

packages/app/tests/e2e/page-objects/SearchPage.ts

@@ -112,6 +112,7 @@ export class SearchPage {
    */
   async performSearch(query: string) {
     await this.searchInput.fill(query);
+    await this.page.keyboard.press('Escape');
     await this.searchButton.click();
     await this.page.waitForLoadState('networkidle');
     // Wait for new results to populate