fix

frontend/src/static/js/components/management-table/ManageItemList-filters.scss

@@ -66,7 +66,7 @@
     }
 
     @media (min-width: 1024px) {
-      width: 10%;
+      width: 20%;
 
       &:nth-child(3n + 1),
       &:nth-child(3n + 2),
@@ -98,6 +98,12 @@
         padding-right: 0;
       }
     }
+
+    &.mi-filter-full-width {
+      width: 100% !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
   }
 
   .mi-filter-title {
@@ -154,6 +160,37 @@
         opacity: 1;
       }
     }
+
+    &.mi-filter-options-horizontal {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+
+      > * {
+        display: inline-block;
+        margin-top: 0;
+        margin-right: 8px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        button {
+          padding: 6px 12px;
+          border-radius: 4px;
+          background-color: var(--sidebar-nav-border-color);
+          opacity: 1;
+
+          &:hover {
+            background-color: var(--header-circle-button-bg-active-color);
+          }
+        }
+
+        &.active button {
+          background-color: var(--header-circle-button-bg-active-color);
+        }
+      }
+    }
   }
 }
 

frontend/src/static/js/components/search-filters/ProfileMediaTags.jsx

@@ -43,9 +43,9 @@ export function ProfileMediaTags(props) {
   return (
     <div ref={containerRef} className={'mi-filters-row' + (isHidden ? ' hidden' : '')}>
       <div ref={innerContainerRef} className="mi-filters-row-inner">
-        <div className="mi-filter">
+        <div className="mi-filter mi-filter-full-width">
           <div className="mi-filter-title">{translateString('TAGS')}</div>
-          <div className="mi-filter-options" style={tagsOptions.length >= 10 ? { maxHeight: '300px', overflowY: 'auto' } : {}}>
+          <div className="mi-filter-options mi-filter-options-horizontal">
             <FilterOptions id={'tag'} options={tagsOptions} selected={tagFilter} onSelect={onFilterSelect} />
           </div>
         </div>

frontend/src/static/js/pages/ProfileMediaPage.js

@@ -583,17 +583,23 @@ export class ProfileMediaPage extends Page {
   onToggleFiltersClick() {
     this.setState({
       hiddenFilters: !this.state.hiddenFilters,
+      hiddenTags: true,
+      hiddenSorting: true,
     });
   }
 
   onToggleTagsClick() {
     this.setState({
+      hiddenFilters: true,
       hiddenTags: !this.state.hiddenTags,
+      hiddenSorting: true,
     });
   }
 
   onToggleSortingClick() {
     this.setState({
+      hiddenFilters: true,
+      hiddenTags: true,
       hiddenSorting: !this.state.hiddenSorting,
     });
   }