From 318687dccf93e5efcb0710e191353b339442e7b5 Mon Sep 17 00:00:00 2001
From: Kaleb Sitton <kalebsitton@gmail.com>
Date: Mon, 29 Jun 2026 15:35:31 -0500
Subject: [PATCH] feat(ui): smooth and tidy the filter category accordion in
 the new UI

The new-UI filter categories used native <details>: the chevron animated but
the body snapped open/closed, the header bars jumped to new positions instead of
sliding together, and the categories packed inconsistently two-per-row (the
filter form is display:flex/wrap), which was hard to scan.

- Convert each category to a small Alpine toggle: a <button> with aria-expanded
  and type=button (so it never submits the filter form), with the body wrapped in
  an overflow-clipped grid that animates grid-template-rows 0fr->1fr. Animating
  the real layout height makes the whole header stack slide together smoothly and
  collapse fully to 0. Works in all browsers; default-open groups server-render
  the open state so there is no flash on load.
- Give each category flex: 0 0 100% so they stack as full-width rows instead of
  packing two-per-row, making the filter panel easy to scan.
---
 dojo/static/dojo/css/dojo.css           | 33 +++++++++++++----
 dojo/templates/dojo/filter_snippet.html | 48 +++++++++++++------------
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/dojo/static/dojo/css/dojo.css b/dojo/static/dojo/css/dojo.css
index 8871ec262be..1a104d7345a 100644
--- a/dojo/static/dojo/css/dojo.css
+++ b/dojo/static/dojo/css/dojo.css
@@ -1084,8 +1084,9 @@ span.endpoint_product {
     .filter-form-group > .col-lg-3 { grid-column: span 3; }
 }
 
-/* Filter category grouping (details/summary) */
+/* Filter category grouping (Alpine-toggled accordion) */
 .filter-category {
+    flex: 0 0 100%;
     border-bottom: 1px solid var(--color-border, #DCDCDC);
 }
 
@@ -1097,14 +1098,15 @@ span.endpoint_product {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
     padding: 0.5rem 0.25rem;
+    background: none;
+    border: none;
+    font: inherit;
+    color: inherit;
+    text-align: left;
     cursor: pointer;
     user-select: none;
-    list-style: none;
-}
-
-.filter-category-header::-webkit-details-marker {
-    display: none;
 }
 
 .filter-category-title {
@@ -1121,10 +1123,27 @@ span.endpoint_product {
     transition: transform 0.2s ease;
 }
 
-.filter-category[open] > .filter-category-header .filter-category-chevron {
+.filter-category-chevron.is-open {
     transform: rotate(180deg);
 }
 
+/* Slide the whole category open/closed via the grid-rows trick so the header
+   stack moves together smoothly instead of snapping. Works in all browsers. */
+.filter-category-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s ease;
+}
+
+.filter-category-content.is-open {
+    grid-template-rows: 1fr;
+}
+
+.filter-category-content > .filter-category-clip {
+    overflow: hidden;
+    min-height: 0;
+}
+
 .filter-category-body {
     padding-bottom: 0.75rem;
 }
diff --git a/dojo/templates/dojo/filter_snippet.html b/dojo/templates/dojo/filter_snippet.html
index cf92898e58a..84387e4f887 100644
--- a/dojo/templates/dojo/filter_snippet.html
+++ b/dojo/templates/dojo/filter_snippet.html
@@ -14,31 +14,35 @@
         {% endfor %}
         {% get_filter_groups form as filter_groups %}
         {% for group in filter_groups %}
-            <details class="filter-category" {% if group.open %}open{% endif %}>
-                <summary class="filter-category-header">
+            <div class="filter-category" x-data="{ open: {% if group.open %}true{% else %}false{% endif %} }">
+                <button type="button" class="filter-category-header" @click="open = !open" :aria-expanded="open">
                     <span class="filter-category-title">{{ group.name }}</span>
-                    <i class="fa-solid fa-chevron-down filter-category-chevron"></i>
-                </summary>
-                <div class="container-fluid filter-form-group filter-category-body">
-                    {% for field in group.fields %}
-                        <div class="col-lg-3 col-md-4 col-sm-6 col-12">
-                            <div class="filter-form-input" style="min-width: 0;">
-                                <label for="{{ field.auto_id }}" class="form-label mb-1" style="display: block;">
-                                    {{ field.label }}
-                                    {% if field.help_text %}
-                                        <i class="fa-solid fa-circle-question has-popover"
-                                        data-content="{{ field.help_text }}">
-                                        </i>
-                                    {% endif %}
-                                </label>
-                                {% with placeholder="placeholder:"|add:field.label %}
-                                  {{ field|addcss:"class: form-control filter-form-control"|addcss:placeholder }}
-                                {% endwith %}
-                            </div>
+                    <i class="fa-solid fa-chevron-down filter-category-chevron{% if group.open %} is-open{% endif %}" :class="{ 'is-open': open }"></i>
+                </button>
+                <div class="filter-category-content{% if group.open %} is-open{% endif %}" :class="{ 'is-open': open }">
+                    <div class="filter-category-clip">
+                        <div class="container-fluid filter-form-group filter-category-body">
+                            {% for field in group.fields %}
+                                <div class="col-lg-3 col-md-4 col-sm-6 col-12">
+                                    <div class="filter-form-input" style="min-width: 0;">
+                                        <label for="{{ field.auto_id }}" class="form-label mb-1" style="display: block;">
+                                            {{ field.label }}
+                                            {% if field.help_text %}
+                                                <i class="fa-solid fa-circle-question has-popover"
+                                                data-content="{{ field.help_text }}">
+                                                </i>
+                                            {% endif %}
+                                        </label>
+                                        {% with placeholder="placeholder:"|add:field.label %}
+                                          {{ field|addcss:"class: form-control filter-form-control"|addcss:placeholder }}
+                                        {% endwith %}
+                                    </div>
+                                </div>
+                            {% endfor %}
                         </div>
-                    {% endfor %}
+                    </div>
                 </div>
-            </details>
+            </div>
         {% endfor %}
         <div class="container-fluid">
             <div class="row mt-3">