From 7974eeacdf5412dd8fe58bbe533efab61dbd1a0f Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Mon, 26 Oct 2026 10:46:44 +0800
Subject: [PATCH] fix: render group page category list as collapsible details

Group pages rendered "Browse by category" with a plain div heading instead of the homepage's details/summary, so the two-column grid never applied, the arrow showed but did nothing, and the list didn't collapse on phones.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/templates/category.html | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/website/templates/category.html b/website/templates/category.html
index 4399505c..c1a49186 100644
--- a/website/templates/category.html
+++ b/website/templates/category.html
@@ -56,18 +56,26 @@
 
     {% if group_categories %}
     <nav class="hero-category-nav" aria-labelledby="hero-category-heading">
-      <div class="hero-category-meta">
-        <h2 id="hero-category-heading">Browse by category</h2>
-      </div>
-      <ul class="hero-category-links">
-        {% for sub in group_categories %}
-        <li>
-          <a class="hero-category-link" href="{{ category_urls[sub.name] }}"
-            >{{ sub.name }}</a
-          >
-        </li>
-        {% endfor %}
-      </ul>
+      <details class="hero-category-details" open>
+        <summary class="hero-category-meta">
+          <h2 id="hero-category-heading">Browse by category</h2>
+        </summary>
+        <ul class="hero-category-links">
+          {% for sub in group_categories %}
+          <li>
+            <a class="hero-category-link" href="{{ category_urls[sub.name] }}"
+              >{{ sub.name }}</a
+            >
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+      <script>
+        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
+        if (matchMedia("(max-width: 680px)").matches) {
+          document.currentScript.previousElementSibling.open = false;
+        }
+      </script>
     </nav>
     {% endif %}
   </div>