From 6c81419057d54e2768b5ed424c120ee7621b9f47 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 23:42:13 +0200
Subject: [PATCH] feat(player): full-height glassy nav strips flanking the
 modal

Replace the small centred prev/next arrow buttons with faint translucent glass
strips that span the modal's full height, hugging each side of the card (hidden
on narrow screens where there's no room). Same stepping behaviour + Shift+arrow
shortcut; just a larger, easier target that reads as part of the dialog.
---
 frontend/src/components/PlayerModal.tsx | 46 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index ba915f9..f684ea4 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -437,10 +437,12 @@ export default function PlayerModal({
       role="dialog"
       aria-modal="true"
     >
-      {/* Faint prev/next zones flanking the card — step through the feed's order (or a playlist).
-          They fade out at the ends. stopPropagation so a click steps instead of closing. */}
-      {hasQueue && (
-        <>
+      {/* The card, flanked by full-height glassy strips that step through the feed's order (or a
+          playlist). Each strip sits just outside the card, spans its full height, and fades out at
+          the ends. stopPropagation so a click steps instead of closing. Hidden on narrow screens
+          where there's no room beside the card. */}
+      <div className="relative flex w-full max-w-4xl max-h-full">
+        {hasQueue && (
           <button
             onClick={(e) => {
               e.stopPropagation();
@@ -449,28 +451,15 @@ export default function PlayerModal({
             disabled={index === 0}
             aria-label={t("player.previous")}
             title={`${t("player.previous")} · Shift+←`}
-            className="absolute left-1 sm:left-3 top-1/2 -translate-y-1/2 z-20 grid h-16 w-10 place-items-center rounded-xl text-white/40 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-0"
+            className="absolute right-full top-0 bottom-0 mr-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
           >
-            <ChevronLeft className="h-7 w-7" />
+            <ChevronLeft className="h-8 w-8" />
           </button>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              goNext();
-            }}
-            disabled={index >= queue!.length - 1}
-            aria-label={t("player.next")}
-            title={`${t("player.next")} · Shift+→`}
-            className="absolute right-1 sm:right-3 top-1/2 -translate-y-1/2 z-20 grid h-16 w-10 place-items-center rounded-xl text-white/40 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-0"
-          >
-            <ChevronRight className="h-7 w-7" />
-          </button>
-        </>
-      )}
+        )}
       <div
         ref={cardRef}
         tabIndex={-1}
-        className="glass-card relative w-full max-w-4xl max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-none"
+        className="glass-card relative flex-1 min-w-0 max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-none"
         onClick={(e) => e.stopPropagation()}
       >
         <div
@@ -746,6 +735,21 @@ export default function PlayerModal({
           </div>
         </div>
       </div>
+        {hasQueue && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              goNext();
+            }}
+            disabled={index >= queue!.length - 1}
+            aria-label={t("player.next")}
+            title={`${t("player.next")} · Shift+→`}
+            className="absolute left-full top-0 bottom-0 ml-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
+          >
+            <ChevronRight className="h-8 w-8" />
+          </button>
+        )}
+      </div>
     </div>
   );
 }