fix: keep advanced filters accessible on mobile

2026-09-11 07:45:45 +07:00
parent d6bc5ce85c
commit 67d81f81ff
2 changed files with 6 additions and 7 deletions
@@ -78,16 +78,14 @@ const datasetJsonLd = {
  <script>
    const advancedFields = document.querySelectorAll<HTMLElement>(".filter-advanced-field");
    const compactFilters = window.matchMedia("(max-width: 720px)");
-    const syncFilters = (event: MediaQueryList | MediaQueryListEvent) => {
+    const syncFilters = () => {
      advancedFields.forEach(field => {
-        if (event.matches) {
-          field.classList.add("filter-compact-hidden");
-        } else {
-          field.classList.remove("filter-compact-hidden");
-        }
+        // The details element is the responsive disclosure control. Do not
+        // hide its fields with a second JS-only rule.
+        field.classList.remove("filter-compact-hidden");
      });
    };
-    syncFilters(compactFilters);
+    syncFilters();
    compactFilters.addEventListener("change", syncFilters);
  </script>
 </Layout>