Issue #631: fix style active filters

smclab · Oct 10, 2023 · 24ae985 · 24ae985
1 parent 00367b4
commit 24ae985
Showing 1 changed file with 21 additions and 24 deletions.
diff --git a/js-packages/search-frontend/src/components/ActiveFilters.tsx b/js-packages/search-frontend/src/components/ActiveFilters.tsx
@@ -38,7 +38,6 @@ export function ActiveFilter({
         css={css`
           display: flex;
           justify-content: space-between;
-          width: 100%;
           position: absolute;
         `}
       >
@@ -91,30 +90,28 @@ export function ActiveFilter({
             );
           })}
         </div>
-
         {searchQuery.length !== 0 && (
-          <button
-            className="openk9-active-filter"
-            css={css`
-              border: none;
-              background: inherit;
-              padding: 3px 12px;
-              border-radius: 50px;
-              text-decoration: underline;
-              line-height: 24px;
-              display: flex;
-              align-items: center;
-              gap: 10px;
-              white-space: nowrap;
-              cursor: pointer;
-              @media (max-width: 480px) {
-                display: none;
-              }
-            `}
-            onClick={() => onConfigurationChange({ filterTokens: [] })}
-          >
-            {t("remove-filters")}
-          </button>
+          <div>
+            <button
+              className="openk9-active-filter"
+              css={css`
+                border: none;
+                background: inherit;
+                padding: 3px 12px;
+                border-radius: 50px;
+                text-decoration: underline;
+                line-height: 24px;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                white-space: nowrap;
+                cursor: pointer;
+              `}
+              onClick={() => onConfigurationChange({ filterTokens: [] })}
+            >
+              {t("remove-filters")}
+            </button>
+          </div>
         )}
       </div>
     </OverlayScrollbarsComponentDockerFix>