fix: improve sort dropdown positioning with overflow handling

53535128a8496e3f45b5831112156fda20ea9031 · 2026-06-22 21:46:15 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 53535128a8496e3f45b5831112156fda20ea9031
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 9322eba..b85881c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -818,7 +818,7 @@ loadGridPage();
       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);
@@ -826,8 +826,9 @@ loadGridPage();
     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;
     }
   `;

← af766ed fix: prevent sort dropdown cutoff on left edge · back to Apartmentwallpaper · feat: expand grid density slider range to 3-12 columns cb3473f →