fix: prevent sort dropdown cutoff on left edge

048829a39b028870065537a3616bb7755c6cb983 · 2026-06-22 21:45:45 -0700 · Steve Abrams

- Add position: relative and z-index: 100
- Add min-width: 120px for adequate button sizing
- Add overflow: visible to prevent parent clipping
- Fixes dropdown menu visibility when sort control is near left side of page

Files touched

M public/index.html

Diff

commit 048829a39b028870065537a3616bb7755c6cb983
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:45:45 2026 -0700

    fix: prevent sort dropdown cutoff on left edge
    
    - Add position: relative and z-index: 100
    - Add min-width: 120px for adequate button sizing
    - Add overflow: visible to prevent parent clipping
    - Fixes dropdown menu visibility when sort control is near left side of page
---
 public/index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/index.html b/public/index.html
index 892305d..4700004 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1139,6 +1139,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
       font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.15s ease; appearance: none; -webkit-appearance: none;
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
       background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; padding-right: 32px;
+      position: relative; z-index: 100; max-width: 100%; min-width: 120px;
     }
     select[data-sort]:hover, select[aria-label*="sort" i]:hover, .sort-select:hover, .collection-sort-select:hover {
       border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
@@ -1147,6 +1148,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
       outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
     }
     .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+    [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select {
+      overflow: visible !important;
+    }
   `;
   document.head.appendChild(style);
 })();

← 4f8dfa1 feat: add pill-style sort control styling to match grid slid · back to Metallicwallpaper · fix: improve sort dropdown positioning with overflow handlin 6fcb6ee →