[object Object]

← back to Designer Wallcoverings

Fix toolbar CSS: prevent sort dropdown text cutoff + make slider visible

ad572a33e895e98d43b497fe452369dd1b256e79 · 2026-06-23 07:13:59 -0700 · Steve Abrams

CSS improvements:
- #collectionSort: add min-width 140px, max-width 100%, overflow visible
- density slider: increase height 1px → 4px, add border-radius for visibility
- toolbar-left: change flex-wrap from wrap → nowrap to prevent layout shift

These prevent the sort dropdown from clipping text and make the grid slider obvious.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Files touched

Diff

commit ad572a33e895e98d43b497fe452369dd1b256e79
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 23 07:13:59 2026 -0700

    Fix toolbar CSS: prevent sort dropdown text cutoff + make slider visible
    
    CSS improvements:
    - #collectionSort: add min-width 140px, max-width 100%, overflow visible
    - density slider: increase height 1px → 4px, add border-radius for visibility
    - toolbar-left: change flex-wrap from wrap → nowrap to prevent layout shift
    
    These prevent the sort dropdown from clipping text and make the grid slider obvious.
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 shopify/_cwGRID/snippets/collection-toolbar.liquid | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/shopify/_cwGRID/snippets/collection-toolbar.liquid b/shopify/_cwGRID/snippets/collection-toolbar.liquid
index f4a09d11..28f13cbc 100644
--- a/shopify/_cwGRID/snippets/collection-toolbar.liquid
+++ b/shopify/_cwGRID/snippets/collection-toolbar.liquid
@@ -28,7 +28,8 @@
       display: flex;
       gap: 14px;
       align-items: center;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      min-width: 0;
     }
 
     .toolbar-label {
@@ -51,6 +52,9 @@
       color: var(--text-color, inherit);
       cursor: pointer;
       transition: all 0.2s ease;
+      min-width: 140px;
+      max-width: 100%;
+      overflow: visible;
     }
 
     #collectionSort:hover {
@@ -73,10 +77,12 @@
       flex: 0 0 120px;
       -webkit-appearance: none;
       appearance: none;
-      height: 1px;
-      background: var(--border-color, rgba(0,0,0,0.1));
+      width: 120px;
+      height: 4px;
+      background: var(--border-color, rgba(0,0,0,0.15));
       outline: none;
       cursor: pointer;
+      border-radius: 2px;
     }
 
     .density-control input[type="range"]::-webkit-slider-thumb {

← d2fc51db Fix Liquid error: convert collection-toolbar section to snip  ·  back to Designer Wallcoverings  ·  Fix grid selector in toolbar updateGridDensity function 7fe21a33 →