Fix expand/collapse issues: label positioning, icons, button state, and background colors

Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>

Author: Copilot

site/app.js

@@ -174,8 +174,19 @@
             card.classList.add('filter-hidden');
           }
         });
+
+        // Update view toggle button state
+        if (window.updateViewToggleState) {
+          window.updateViewToggleState();
+        }
       });
     });
+
+    // Auto-click "All" button on page load to show all cards
+    const allButton = document.querySelector('.filter-pill[data-filter="all"]');
+    if (allButton) {
+      allButton.click();
+    }
   };
 
   /* ==========================================================
@@ -491,12 +502,26 @@
 
     let isExpanded = false;
 
+    const updateButtonState = () => {
+      const visibleCards = document.querySelectorAll('.tip-card:not(.filter-hidden)');
+      const hasVisibleCards = visibleCards.length > 0;
+      
+      toggleBtn.disabled = !hasVisibleCards;
+      if (!hasVisibleCards) {
+        toggleBtn.style.opacity = '0.5';
+        toggleBtn.style.cursor = 'not-allowed';
+      } else {
+        toggleBtn.style.opacity = '1';
+        toggleBtn.style.cursor = 'pointer';
+      }
+    };
+
     toggleBtn.addEventListener('click', () => {
       isExpanded = !isExpanded;
 
       if (isExpanded) {
         tipsGrid.classList.add('expanded');
-        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊞';
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊟';
         toggleBtn.querySelector('.view-toggle-text').textContent = 'Collapse All';
 
         // Remove toggled class from all cards when expanding
@@ -505,10 +530,16 @@
         });
       } else {
         tipsGrid.classList.remove('expanded');
-        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊟';
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊞';
         toggleBtn.querySelector('.view-toggle-text').textContent = 'Expand All';
       }
     });
+
+    // Check initial state
+    updateButtonState();
+
+    // Make updateButtonState available for filter to call
+    window.updateViewToggleState = updateButtonState;
   };
 
   /* ==========================================================

site/styles.css

@@ -63,8 +63,8 @@ code, pre { font-family: 'JetBrains Mono', monospace; }
   --yellow: #fbbf24;
   --cyan: #22d3ee;
   --red-muted: #ef4444;
-  --old-bg: #11100f;
-  --modern-bg: #0f1117;
+  --old-bg: #1a1412;
+  --modern-bg: #0f1419;
   --radius: 16px;
   --radius-sm: 10px;
   --nav-bg: rgba(11, 11, 15, .8);
@@ -649,6 +649,13 @@ nav {
   border-top: none;
 }
 
+.tips-grid.expanded .tip-card .mini-label {
+  position: relative;
+  top: 0;
+  right: 0;
+  margin-bottom: 8px;
+}
+
 .tips-grid.expanded .tip-card .hover-hint {
   display: none;
 }

templates/index.html

@@ -242,7 +242,7 @@ <h2 class="section-title">All comparisons</h2>
     </div>
     <div class="view-toggle-wrap">
       <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
-        <span class="view-toggle-icon">⊟</span>
+        <span class="view-toggle-icon">⊞</span>
         <span class="view-toggle-text">Expand All</span>
       </button>
     </div>