From bc068551de337d46c3c238bd1e93cf6e7f467042 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Tue, 19 May 2026 20:56:16 +0200
Subject: [PATCH] fix: desktop player-track stretch + mobile padding breathing
 room
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Desktop: player-track had align-self:center (from grid align-items:center),
collapsing it to 52px content height. align-items:center inside it then
centered against 52px, not the full 112px bar — text appeared at top.
align-self:stretch forces player-track to fill the bar height so internal
centering works correctly.

Mobile: padding:14px 12px was too symmetric — art filled the 46px content
area exactly and touched the progress strip. Changed to padding:6px 12px 14px
(6px top breathing room, 14px bottom for progress strip, ~54px content area).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index ea20ec4..425cf3c 100644
--- a/styles.css
+++ b/styles.css
@@ -228,7 +228,7 @@ button:focus{outline:none}
 .player{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(8,8,20,.93);backdrop-filter:blur(28px);border-top:1px solid var(--border2);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:0 20px;z-index:100;will-change:transform}
 .player-drag-handle{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .2s,width .2s;pointer-events:none}
 .player.dragging .player-drag-handle{background:rgba(255,255,255,.45);width:44px}
-.player-track{min-width:0;display:flex;align-items:center;gap:10px;overflow:visible}
+.player-track{min-width:0;display:flex;align-items:center;gap:10px;overflow:visible;align-self:stretch}
 .player-art{width:52px;height:52px;border-radius:50%;background:var(--surface2);flex-shrink:0;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--surface2),0 0 0 4px rgba(255,255,255,.08)}
 .player-art img{width:100%;height:100%;object-fit:cover;border-radius:50%}
 .player-art .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text3)}
@@ -817,7 +817,7 @@ button:focus{outline:none}
     display:grid!important;
     grid-template-columns:1fr auto!important;
     grid-template-rows:1fr!important;
-    padding:14px 12px;
+    padding:6px 12px 14px;
     gap:0 10px;
     align-items:center;
   }