From d2177a5267b0c6e2f060b16e222dbe2f43afd4e3 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Mon, 18 Mar 2024 16:39:03 +0100
Subject: [PATCH] fix(ui): wrap searchbar on small screens (#1973)

---
 .../app/components/shared/MainSearchBar/MainSearchBar.tsx   | 6 +++---
 .../shared/SessionSearchField/AiSessionSearchField.tsx      | 1 +
 .../shared/SessionSearchField/SessionSearchField.tsx        | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
index a1535b3a1..1a71e0489 100644
--- a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
+++ b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
@@ -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
diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index 0f075cb20..ff721d5c0 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -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"
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
index eeac961bb..04af270e9 100644
--- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -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"