Make tag filter collapsible on all screen sizes

.vitepress/theme/BlogIndex.vue

@@ -60,25 +60,33 @@ onMounted(() => {
   if (tagParam && allTags.value.includes(tagParam)) {
     selectedTag.value = tagParam
   }
+  if (window.innerWidth <= 640) {
+    document.querySelector('.blog-tags-details')?.removeAttribute('open')
+  }
 })
 </script>
 
 <template>
   <div class="blog-index">
     <div class="blog-tags-row">
-      <div class="blog-tags" v-if="allTags.length" role="group" aria-label="Filter by tag">
-        <button
-          :class="{ active: !selectedTag }"
-          :aria-pressed="!selectedTag"
-          @click="selectTag(null)"
-        >All ({{ posts.length }})</button>
-        <button
-          v-for="tag in allTags" :key="tag"
-          :class="{ active: selectedTag === tag }"
-          :aria-pressed="selectedTag === tag"
-          @click="selectTag(tag)"
-        >{{ tag }} ({{ tagCounts[tag] }})</button>
-      </div>
+      <details class="blog-tags-details" open>
+        <summary class="blog-tags-summary">
+          Filter by tag<span v-if="selectedTag" class="blog-tags-active-indicator">: {{ selectedTag }}</span>
+        </summary>
+        <div class="blog-tags" v-if="allTags.length" role="group" aria-label="Filter by tag">
+          <button
+            :class="{ active: !selectedTag }"
+            :aria-pressed="!selectedTag"
+            @click="selectTag(null)"
+          >All ({{ posts.length }})</button>
+          <button
+            v-for="tag in allTags" :key="tag"
+            :class="{ active: selectedTag === tag }"
+            :aria-pressed="selectedTag === tag"
+            @click="selectTag(tag)"
+          >{{ tag }} ({{ tagCounts[tag] }})</button>
+        </div>
+      </details>
       <a href="/feed.xml" class="blog-rss-link" aria-label="Subscribe via RSS">
         <Rss :size="14" style="margin-right:4px" />
         RSS

.vitepress/theme/custom.css

@@ -120,6 +120,45 @@
   color: var(--vp-c-brand-1);
 }
 
+/* ── Blog tags collapsible ── */
+.blog-tags-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.blog-tags-details summary {
+  cursor: pointer;
+  list-style: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.blog-tags-details summary::-webkit-details-marker {
+  display: none;
+}
+
+.blog-tags-details summary::after {
+  content: '▸';
+  margin-left: 6px;
+  font-size: 12px;
+  transition: transform 0.2s;
+  display: inline-block;
+}
+
+.blog-tags-details[open] summary::after {
+  transform: rotate(90deg);
+}
+
+.blog-tags-details[open] .blog-tags {
+  margin-top: 12px;
+}
+
+.blog-tags-active-indicator {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+
 /* ── Blog start-here block ── */
 .blog-start-here {
   border: 1px solid var(--vp-c-brand-1);
@@ -650,31 +689,6 @@
     padding: 8px 14px;
   }
 
-  .blog-tags-row {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .blog-tags {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    padding-bottom: 4px;
-    max-width: 100%;
-    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
-  }
-
-  .blog-tags::-webkit-scrollbar {
-    display: none;
-  }
-
-  .blog-tags button {
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
   .blog-start-here {
     padding: 16px 18px;
   }