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

9e649c5e6b1043e675e91205edebf39d53ec53fc · 2026-06-22 21:40:35 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 9e649c5e6b1043e675e91205edebf39d53ec53fc
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 7a49394..6d20f5e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -941,17 +941,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',
@@ -1040,6 +1031,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 {
@@ -1057,6 +1052,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
         gap: 6px;
         flex-basis: 100%;
         order: 0;
+        width: 100%;
       }
 
       .dw-grid-buttons button {
@@ -1108,11 +1104,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 {
@@ -1121,7 +1121,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;

← b4da2f9 enhance: smart product name hiding on 6-column grids · back to Linenwallpaper · feat: add pill-style sort control styling to match grid slid 769b483 →