Merge pull request #225 from javaevolved/brunoborges-fix-toggle-button-width

Keep show-all button width stable

Author: brunoborges

site/app.js

@@ -229,7 +229,7 @@
 
     const updateShowAllButton = () => {
       if (!showAllButton) return;
-      showAllButton.textContent = showingAll
+      showAllButton.querySelector('.show-all-btn-text').textContent = showingAll
         ? showAllButton.dataset.hideLabel
         : showAllButton.dataset.showLabel;
     };

site/styles.css

@@ -497,6 +497,7 @@ nav {
 }
 
 .show-all-btn {
+  display: grid;
   padding: 10px 20px;
   color: var(--text);
   font: inherit;
@@ -509,6 +510,25 @@ nav {
   transition: all 0.25s;
 }
 
+.show-all-btn::before,
+.show-all-btn::after,
+.show-all-btn-text {
+  grid-area: 1 / 1;
+}
+
+.show-all-btn::before,
+.show-all-btn::after {
+  visibility: hidden;
+}
+
+.show-all-btn::before {
+  content: attr(data-show-label);
+}
+
+.show-all-btn::after {
+  content: attr(data-hide-label);
+}
+
 .show-all-btn:hover {
   transform: translateY(-2px);
   background: var(--surface-2);

templates/index.html

@@ -300,7 +300,7 @@ <h2 class="section-title">{{site.allComparisons}}</h2>
       </div>
       <button class="show-all-btn" id="showAllButton" type="button"
               data-show-label="{{filters.showAll}}" data-hide-label="{{filters.hideAll}}">
-        {{filters.showAll}}
+        <span class="show-all-btn-text">{{filters.showAll}}</span>
       </button>
       <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
         <span class="view-toggle-icon">⊞</span>