From 1200d4472a01dfc70de1b0c01d2002c27dc4afcd Mon Sep 17 00:00:00 2001
From: kermieisinthehouse <kermie@isinthe.house>
Date: Sun, 15 May 2022 16:50:51 -0700
Subject: [PATCH] CSS: Fix mobile filter tags (#2584)

---
 ui/v2.5/src/components/List/FilterTags.tsx |  4 +++-
 ui/v2.5/src/index.scss                     | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/List/FilterTags.tsx b/ui/v2.5/src/components/List/FilterTags.tsx
index 9d7ae23f3..db7a7063e 100644
--- a/ui/v2.5/src/components/List/FilterTags.tsx
+++ b/ui/v2.5/src/components/List/FilterTags.tsx
@@ -55,6 +55,8 @@ export const FilterTags: React.FC<IFilterTagsProps> = ({
   }
 
   return (
-    <div className="d-flex justify-content-center">{renderFilterTags()}</div>
+    <div className="d-flex justify-content-center mb-2 wrap-tags">
+      {renderFilterTags()}
+    </div>
   );
 };
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index b208441ae..99565d469 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -338,6 +338,19 @@ div.dropdown-menu {
   margin-right: 10px;
 }
 
+.wrap-tags {
+  column-gap: 10px;
+  flex-wrap: wrap;
+  row-gap: 10px;
+
+  /* stylelint-disable */
+  .badge {
+    white-space: normal !important;
+    margin: unset;
+  }
+  /* stylelint-enable */
+}
+
 .tag-item {
   background-color: $muted-gray;
   color: $dark-text;