fix: improve grid density slider CSS to prevent overlap with sort controls

65e31b2ee8a9e526959662eba15117db26c08287 · 2026-06-22 21:40:35 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 65e31b2ee8a9e526959662eba15117db26c08287
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:40:35 2026 -0700

    fix: improve grid density slider CSS to prevent overlap with sort controls
---
 public/index.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4e6e260..22b75df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1054,17 +1054,8 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
      Inject before   <script src="/hero-4grid.js" defer></script>
 <script src="/dw-theme-nav.js" defer></script>
 
-<!-- GRID DENSITY SLIDER + SMART NAMES (MOBILE-OPTIMIZED) -->
+<!-- GRID DENSITY SLIDER (MOBILE-OPTIMIZED) -->
 <script>
-/**
- * Grid Density Slider + Smart Name Toggle
- *
- * - 1-5 columns: Show product names for clarity
- * - 6+ columns: Hide product names to reduce clutter, maximize images
- *
- * Mobile-first, touch-optimized, responsive
- */
-
 (function(){
   const CFG = {
     storageKey: 'dw_grid_cols',
@@ -1153,6 +1144,10 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
         border-radius: 4px;
         background: #fafafa;
         flex-wrap: wrap;
+        width: 100%;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
       }
 
       .dw-grid-label {
@@ -1170,6 +1165,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
         gap: 6px;
         flex-basis: 100%;
         order: 0;
+        width: 100%;
       }
 
       .dw-grid-buttons button {
@@ -1221,11 +1217,15 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
           border: none;
           padding: 12px 0;
           margin: 24px 0;
+          width: auto;
+          min-width: fit-content;
+          flex-shrink: 0;
         }
 
         .dw-grid-label {
           flex-basis: auto;
           order: 0;
+          flex-shrink: 0;
         }
 
         .dw-grid-buttons {
@@ -1234,7 +1234,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
 
         .dw-slider {
           display: block;
-          flex: 0 1 200px;
+          flex: 0 0 200px;
           height: 4px;
           border-radius: 2px;
           background: #ddd;

← 31aaa0f enhance: smart product name hiding on 6-column grids · back to Silkwallpaper · feat: add pill-style sort control styling to match grid slid aeee1ec →