From b6591bca18019821ca67743b2544eea15ef0ef6a Mon Sep 17 00:00:00 2001
From: Jis G Jacob <studiokeys@blissroms.org>
Date: Tue, 12 May 2026 22:51:05 +0530
Subject: [PATCH] Atoll: keep lockscreen player legible over Spotify Canvas
 wallpaper

Replace the transparent canvas-fallback panel background with a soft
ultra-thin dark scrim plus a gentle vertical gradient and hairline
stroke, and add a subtle drop shadow on the foreground so titles, time
labels, and controls stay readable on bright or busy canvas videos.
Restore consistent horizontal and vertical padding in canvas-fallback
mode so the marquee title and inline elapsed/remaining timers no longer
hug the panel edges.

Signed-off-by: Jis G Jacob <studiokeys@blissroms.org>
---
 .../LockScreen/LockScreenMusicPanel.swift     | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/DynamicIsland/components/LockScreen/LockScreenMusicPanel.swift b/DynamicIsland/components/LockScreen/LockScreenMusicPanel.swift
index f5830fa..f9a86dc 100644
--- a/DynamicIsland/components/LockScreen/LockScreenMusicPanel.swift
+++ b/DynamicIsland/components/LockScreen/LockScreenMusicPanel.swift
@@ -153,6 +153,12 @@ struct LockScreenMusicPanel: View {
         ZStack(alignment: .topLeading) {
             panelBackgroundLayer
             panelForeground
+                .shadow(
+                    color: usesSpotifyCanvasFallbackContentPresentation ? Color.black.opacity(0.55) : .clear,
+                    radius: usesSpotifyCanvasFallbackContentPresentation ? 10 : 0,
+                    x: 0,
+                    y: usesSpotifyCanvasFallbackContentPresentation ? 2 : 0
+                )
         }
         .frame(width: currentSize.width, height: currentSize.height, alignment: .topLeading)
         .clipShape(RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous))
@@ -162,10 +168,10 @@ struct LockScreenMusicPanel: View {
             }
         }
         .shadow(
-            color: usesSpotifyCanvasFallbackContentPresentation ? .clear : Color.black.opacity(0.3),
-            radius: usesSpotifyCanvasFallbackContentPresentation ? 0 : 20,
+            color: usesSpotifyCanvasFallbackContentPresentation ? Color.black.opacity(0.35) : Color.black.opacity(0.3),
+            radius: usesSpotifyCanvasFallbackContentPresentation ? 26 : 20,
             x: 0,
-            y: usesSpotifyCanvasFallbackContentPresentation ? 0 : 10
+            y: usesSpotifyCanvasFallbackContentPresentation ? 14 : 10
         )
         .contentShape(Rectangle())
         .animation(.easeInOut(duration: 0.28), value: isExpanded)
@@ -253,8 +259,8 @@ struct LockScreenMusicPanel: View {
                 collapsedLayout
             }
         }
-        .padding(.horizontal, usesSpotifyCanvasFallbackContentPresentation ? 8 : (isExpanded ? 24 : 20))
-        .padding(.vertical, usesSpotifyCanvasFallbackContentPresentation ? 0 : (isExpanded ? 22 : 16))
+        .padding(.horizontal, usesSpotifyCanvasFallbackContentPresentation ? (isExpanded ? 24 : 22) : (isExpanded ? 24 : 20))
+        .padding(.vertical, usesSpotifyCanvasFallbackContentPresentation ? (isExpanded ? 18 : 14) : (isExpanded ? 22 : 16))
         .frame(
             maxWidth: .infinity,
             maxHeight: .infinity,
@@ -1138,9 +1144,7 @@ struct LockScreenMusicPanel: View {
     @ViewBuilder
     private var panelBackgroundLayer: some View {
         if usesSpotifyCanvasFallbackContentPresentation {
-            Color.clear
-                .allowsHitTesting(false)
-                .accessibilityHidden(true)
+            canvasFallbackScrim
         } else if usesCustomLiquidGlass {
             customLiquidPanelBackdrop
         } else if usesStandardLiquidGlass {
@@ -1152,6 +1156,31 @@ struct LockScreenMusicPanel: View {
         }
     }
 
+    private var canvasFallbackScrim: some View {
+        RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous)
+            .fill(.ultraThinMaterial)
+            .environment(\.colorScheme, .dark)
+            .overlay {
+                LinearGradient(
+                    colors: [
+                        Color.black.opacity(0.32),
+                        Color.black.opacity(0.18),
+                        Color.black.opacity(0.32)
+                    ],
+                    startPoint: .top,
+                    endPoint: .bottom
+                )
+                .clipShape(RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous))
+            }
+            .overlay {
+                RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous)
+                    .stroke(Color.white.opacity(0.10), lineWidth: 0.6)
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .allowsHitTesting(false)
+            .accessibilityHidden(true)
+    }
+
     @ViewBuilder
     private var standardLiquidPanelBackdrop: some View {
         if #available(macOS 26.0, *) {