fix(web): ensure filters start collapsed on mobile

Author: luongnv89

web/src/main.js

@@ -280,7 +280,7 @@ function renderCategoryFilters() {
     container.appendChild(expandBtn);
 
     const expandableContainer = document.createElement('div');
-    expandableContainer.className = 'filter-pills-expandable';
+    expandableContainer.className = 'filter-pills-expandable collapsed';
 
     otherCategories.forEach(category => {
       const pill = document.createElement('button');
@@ -345,7 +345,7 @@ function renderMoodFilters() {
     container.appendChild(expandBtn);
 
     const expandableContainer = document.createElement('div');
-    expandableContainer.className = 'filter-pills-expandable';
+    expandableContainer.className = 'filter-pills-expandable collapsed';
 
     otherMoods.forEach(mood => {
       expandableContainer.appendChild(createMoodPill(mood));

web/src/style.css

@@ -712,8 +712,9 @@ body::before {
   display: none;
 }
 
-/* Expandable pills container - inline on desktop */
-.filter-pills-expandable {
+/* Expandable pills container - inline on desktop (ignore collapsed state) */
+.filter-pills-expandable,
+.filter-pills-expandable.collapsed {
   display: contents;
 }