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

5b9dc32d1ce9a9bd983ba423b8d8bf21d6fe8115 · 2026-06-22 21:40:34 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 5b9dc32d1ce9a9bd983ba423b8d8bf21d6fe8115
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:40:34 2026 -0700

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

diff --git a/public/index.html b/public/index.html
index 4fb804f..deaa913 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1146,17 +1146,8 @@ loadGridPage();
 <script src="/aw-config.js"></script>
 <script src="/buybutton.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',
@@ -1245,6 +1236,10 @@ loadGridPage();
         border-radius: 4px;
         background: #fafafa;
         flex-wrap: wrap;
+        width: 100%;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
       }
 
       .dw-grid-label {
@@ -1262,6 +1257,7 @@ loadGridPage();
         gap: 6px;
         flex-basis: 100%;
         order: 0;
+        width: 100%;
       }
 
       .dw-grid-buttons button {
@@ -1313,11 +1309,15 @@ loadGridPage();
           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 {
@@ -1326,7 +1326,7 @@ loadGridPage();
 
         .dw-slider {
           display: block;
-          flex: 0 1 200px;
+          flex: 0 0 200px;
           height: 4px;
           border-radius: 2px;
           background: #ddd;
@@ -1454,6 +1454,5 @@ loadGridPage();
 })();
 
 </script>
-
 </body>
 </html>

← b3e4ee0 enhance: smart product name hiding on 6-column grids · back to Apartmentwallpaper · feat: add pill-style sort control styling to match grid slid 33eb69d →