jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): wrap searchbar on small screens (#1973)

Browse source
This commit is contained in:
Delirium 2024-03-18 16:39:03 +01:00 • committed by GitHub
parent 893e7093d8
commit d2177a5267
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
View file

@ -23,11 +23,11 @@ const MainSearchBar = (props: Props) => {
const originStr = window.env.ORIGIN || window.location.origin;
const isSaas = /app\.openreplay\.com/.test(originStr);
return (
<div className="flex items-center">
<div style={{ width: '60%', marginRight: '10px' }}>
<div className="flex items-center flex-wrap">
<div style={{ flex: 3, marginRight: '10px' }}>
{isSaas ? <AiSessionSearchField /> : <SessionSearchField />}
</div>
<div className="flex items-center gap-2" style={{ width: '40%' }}>
<div className="flex items-center gap-2" style={{ flex: 2 }}>
<TagList />
<SavedSearch />
<Button

1
frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
View file

@ -65,6 +65,7 @@ function SessionSearchField(props: Props) {
onBlur={onBlur}
onChange={onSearchChange}
placeholder={'Search sessions using any captured event (click, input, page, error...)'}
style={{ minWidth: 360 }}
id="search"
type="search"
autoComplete="off"

1
frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
View file

@ -50,6 +50,7 @@ function SessionSearchField(props: Props) {
onBlur={() => setTimeout(setShowModal, 200, false)}
onChange={onSearchChange}
placeholder={'Search sessions using any captured event (click, input, page, error...)'}
style={{ minWidth: 360 }}
id="search"
type="search"
autoComplete="off"