From eee364e29c6cac38f1d3e5406103f562a3115f4f Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 2 Feb 2026 09:26:17 -0600
Subject: [PATCH] style(ui): genre popup extends left, 480px wide, 3 columns

---
 src/lib/components/GenreFilterPopup.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/GenreFilterPopup.svelte b/src/lib/components/GenreFilterPopup.svelte
index 93414791d..69e16b94a 100644
--- a/src/lib/components/GenreFilterPopup.svelte
+++ b/src/lib/components/GenreFilterPopup.svelte
@@ -60,14 +60,14 @@
     const anchorRect = anchorEl.getBoundingClientRect();
     const popupRect = popupEl.getBoundingClientRect();
 
+    // Align right edge of popup with right edge of anchor (extends to the left)
     let left = anchorRect.right - popupRect.width;
     let top = anchorRect.bottom + 8;
 
-    // Keep within viewport
+    // Only adjust left if it goes off the LEFT edge of the screen
     if (left < 8) left = 8;
-    if (left + popupRect.width > window.innerWidth - 8) {
-      left = window.innerWidth - popupRect.width - 8;
-    }
+
+    // Handle vertical overflow
     if (top + popupRect.height > window.innerHeight - 8) {
       top = anchorRect.top - popupRect.height - 8;
     }
@@ -171,8 +171,8 @@
   .genre-popup {
     position: fixed;
     z-index: 10000;
-    width: 420px;
-    max-height: 420px;
+    width: 480px;
+    max-height: 500px;
     background: var(--bg-primary);
     border: 1px solid var(--border-subtle);
     border-radius: 10px;
@@ -259,11 +259,11 @@
 
   .genres-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 6px;
     padding: 12px;
     overflow-y: auto;
-    max-height: 320px;
+    max-height: 400px;
   }
 
   .genre-card {