From aa7d0771dc824211165269ac956de367302e465b Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 25 Nov 2022 15:27:58 +0100
Subject: [PATCH] fix(ui): fix search cols

---
 .../shared/Filters/FilterModal/FilterModal.module.css         | 3 ++-
 .../app/components/shared/Filters/FilterModal/FilterModal.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css
index 463a7a2a9..37cf966c6 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css
@@ -10,6 +10,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  max-width: 200px;
   &:hover {
     background-color: $active-blue;
     color: $teal !important;
@@ -34,4 +35,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index c833583f7..381494abc 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -64,10 +64,10 @@ function FilterModal(props: Props) {
     // console.log(matchingFilters)
   return (
     <div className={stl.wrapper} style={{ width: '480px', maxHeight: '380px', overflowY: 'auto'}}>
-      <div className={searchQuery && !isResultEmpty ? 'mb-6' : ''} style={{ columns: "auto 200px" }}>
+      <div className={searchQuery && !isResultEmpty ? 'mb-6' : ''} style={{ columns: matchingCategories.length > 1 ? 'auto 200px' : 1 }}>
           {matchingCategories.map((key) => {
             return (
-              <div className="mb-6" key={key}>
+              <div className="mb-6 flex flex-col gap-2" key={key}>
                 <div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
                 <div>
                   {matchingFilters[key] && matchingFilters[key].map((filter: any) => (