CSS: Fix mobile filter tags (#2584)

stashapp · May 15, 2022 · 1200d44 · 1200d44
1 parent 55366fa
commit 1200d44
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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;