fix: improve sort dropdown positioning with overflow handling

6fcb6ee27c0d8163b756decb8607cf6c5a598718 · 2026-06-22 21:46:15 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 6fcb6ee27c0d8163b756decb8607cf6c5a598718
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:46:15 2026 -0700

    fix: improve sort dropdown positioning with overflow handling
---
 public/index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4700004..a8c7a5a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1139,7 +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;
+      position: relative; z-index: 100; max-width: 100%; min-width: 140px;
     }
     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,8 +1147,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
     select[data-sort]:focus, select[aria-label*="sort" i]:focus, .sort-select:focus, .collection-sort-select:focus {
       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 {
+    .sort-control-wrapper { display: inline-block; position: relative; margin-right: 8px; }
+    .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; overflow: visible !important; }
+    [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select, .filters-toolbar {
       overflow: visible !important;
     }
   `;

← 048829a fix: prevent sort dropdown cutoff on left edge · back to Metallicwallpaper · auto-save: 2026-06-22T21:48:03 (1 files) — public/index.html 518c166 →