Skip to content

style(search): unify xs input height to 30px across search header #2391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elizabetdev merged 3 commits into from
Jun 1, 2026
Merged

style(search): unify xs input height to 30px across search header #2391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36af1a4
style(search): reduce xs input height from 32px to 30px
elizabetdev May 31, 2026
4e2f6a5
feat(time-picker): support xs size and apply across search header
elizabetdev May 31, 2026
f1541e1
fix(search): match Lucene xs input height to SQL (30px)
elizabetdev Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/app/src/DBSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ function SearchSubmitButton({
type="submit"
leftSection={<IconPlayerPlay size={16} />}
style={{ flexShrink: 0 }}
size="xs"
>
Run
</Button>
Expand Down Expand Up @@ -1982,6 +1983,7 @@ export function DBSearchPage() {
minWidth="min(600px, 100%)"
dateRange={searchedTimeRange}
sourceId={inputSource}
size="xs"
/>
<Flex
gap="sm"
Expand All @@ -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)}
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/SearchInput/AutocompleteInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 6 additions & 3 deletions packages/app/src/components/SearchInput/SearchWhereInput.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -79,7 +82,7 @@
background-color: var(--color-bg-field-addon);

&.sizeXs {
height: 32px;
height: 30px;
}

&.sizeSm {
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/TimePicker/TimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const TimePickerComponent = ({
isLiveMode = false,
defaultRelativeTimeMode = false,
width = 350,
size = 'sm',
}: {
inputValue: string;
setInputValue: (str: string) => any;
Expand All @@ -116,6 +117,7 @@ const TimePickerComponent = ({
isLiveMode?: boolean;
defaultRelativeTimeMode?: boolean;
width?: number | string;
size?: 'xs' | 'sm';
}) => {
const {
userPreferences: { timeFormat },
Expand Down Expand Up @@ -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) {
Expand Down
Loading