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>
   );
 }