From f574746b3729f2d90ab19c9c91877785a6b2131a Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 2 May 2024 16:37:03 +0200
Subject: [PATCH] fix ui: fixes for search bar buttons, filter spacing

---
 .../app/components/shared/Filters/FilterList/FilterList.tsx  | 5 +++++
 .../app/components/shared/MainSearchBar/MainSearchBar.tsx    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 9596556cf..766e41a7b 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -230,6 +230,10 @@ function FilterList(props: Props) {
           <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
           {filters.map((filter: any, filterIndex: any) =>
             !filter.isEvent ? (
+              <div className={'py-2 hover:bg-active-blue px-5'} style={{
+                marginLeft: '-1.25rem',
+                width: 'calc(100% + 2.5rem)',
+              }}>
               <FilterItem
                 key={filterIndex}
                 readonly={props.readonly}
@@ -241,6 +245,7 @@ function FilterList(props: Props) {
                 excludeFilterKeys={excludeFilterKeys}
                 isConditional={isConditional}
               />
+              </div>
             ) : null
           )}
         </>
diff --git a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
index 14916650e..bc2521b44 100644
--- a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
+++ b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
@@ -37,7 +37,7 @@ const MainSearchBar = (props: Props) => {
       <div style={{ flex: 3, marginRight: '10px' }}>
         {isSaas ? <AiSessionSearchField /> : <SessionSearchField />}
       </div>
-      <div className="flex items-center gap-2" style={{ flex: 2 }}>
+      <div className="flex items-center gap-2 my-2 lg:my-0" style={{ flex: 2 }}>
         <TagList />
         <SavedSearch />
         <Button