Full-bleed album art in Now Playing, matched to Email card size

- Album art fills the tile edge-to-edge as a background image
- Gradient overlay keeps header and track info readable
- Tile wrapper uses img-tile + p-0 so it matches Email Me card
  height and has no padding fighting the art

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Paebak

src/components/NowPlaying.jsx

@@ -43,22 +43,25 @@ export default function NowPlaying() {
       rel="noopener noreferrer"
       className="now-playing text-decoration-none"
     >
+      {/* Full-bleed album art */}
+      {track?.image && (
+        <img src={track.image} alt={track?.album} className="now-playing__bg" />
+      )}
+      <div className="now-playing__overlay" />
+
+      {/* Label pinned to top */}
       <div className="now-playing__header">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
           <path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z"/>
         </svg>
         <span>{loading ? "Loading…" : track?.isPlaying ? "Now Playing" : "Last Played"}</span>
       </div>
 
+      {/* Track info pinned to bottom */}
       {track && !loading && (
-        <div className="now-playing__body">
-          {track.image && (
-            <img src={track.image} alt={track.album} className="now-playing__art" />
-          )}
-          <div className="now-playing__info">
-            <span className="now-playing__track">{track.name}</span>
-            <span className="now-playing__artist">{track.artist}</span>
-          </div>
+        <div className="now-playing__footer">
+          <span className="now-playing__track">{track.name}</span>
+          <span className="now-playing__artist">{track.artist}</span>
         </div>
       )}
 

src/pages/Home.jsx

@@ -120,7 +120,7 @@ export default function Home() {
           </a>
 
           {/* NOW PLAYING */}
-          <div className="tile bento-sm">
+          <div className="tile bento-sm img-tile p-0">
             <NowPlaying />
           </div>
 

src/theme.css

@@ -704,17 +704,34 @@ body { margin: 0; }
 
 /* Now Playing */
 .now-playing {
+  position: relative;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  gap: 10px;
+  justify-content: space-between;
   width: 100%;
   height: 100%;
-  padding: 16px;
+  padding: 14px;
   color: inherit;
 }
 
+.now-playing__bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.now-playing__overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.72) 100%);
+}
+
 .now-playing__header {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -725,24 +742,12 @@ body { margin: 0; }
   color: var(--nf-green);
 }
 
-.now-playing__body {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.now-playing__art {
-  width: 56px;
-  height: 56px;
-  border-radius: 6px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.now-playing__info {
+.now-playing__footer {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 2px;
   min-width: 0;
 }
 
@@ -757,13 +762,15 @@ body { margin: 0; }
 
 .now-playing__artist {
   font-size: 0.75rem;
-  color: rgba(255,255,255,0.6);
+  color: rgba(255,255,255,0.7);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .now-playing__bars {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: flex-end;
   gap: 3px;