From db81595b023f84e5af974aa00dcdcc122fb8f1b7 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Sun, 21 Jun 2026 22:12:20 +0200
Subject: [PATCH] fix(ui): star button sits right next to track info, not far
 right

Wrap player-info + star in .player-info-wrap (flex, align-items:center)
so the star is immediately to the right of the text block and centered
vertically with it, instead of floating to the far end of the 1fr column.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 30 ++++++++++++++++--------------
 styles.css |  4 +++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 40a4d16..4d584a1 100644
--- a/index.html
+++ b/index.html
@@ -471,22 +471,24 @@
     <div class="player-drag-handle"></div>
     <div class="player-track">
       <div class="player-art" id="player-art" style="cursor:pointer" title="Jetzt läuft öffnen"><div class="no-art">♪</div></div>
-      <div class="player-info">
-        <div class="player-title" id="player-title">Kein Titel</div>
-        <div class="player-artist">
-          <span id="player-album-name" onclick="playerBarGoAlbum()" style="cursor:pointer" title="Zum Album"></span>
-        </div>
-        <div class="player-artist" id="player-artist">
-          <span id="player-artist-name">—</span>
-        </div>
-        <div class="player-status-row">
-          <span class="status-badge badge-shuffle" id="badge-shuffle">🔀 Shuffle</span>
-          <span class="status-badge badge-repeat" id="badge-repeat">🔁 Repeat</span>
+      <div class="player-info-wrap">
+        <div class="player-info">
+          <div class="player-title" id="player-title">Kein Titel</div>
+          <div class="player-artist">
+            <span id="player-album-name" onclick="playerBarGoAlbum()" style="cursor:pointer" title="Zum Album"></span>
+          </div>
+          <div class="player-artist" id="player-artist">
+            <span id="player-artist-name">—</span>
+          </div>
+          <div class="player-status-row">
+            <span class="status-badge badge-shuffle" id="badge-shuffle">🔀 Shuffle</span>
+            <span class="status-badge badge-repeat" id="badge-repeat">🔁 Repeat</span>
+          </div>
         </div>
+        <button id="btn-star-current" onclick="starCurrent()" title="Favorit" style="background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;display:flex;align-items:center;color:var(--text3)">
+          <svg id="star-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+        </button>
       </div>
-      <button id="btn-star-current" onclick="starCurrent()" title="Favorit" style="background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;display:flex;align-items:center;color:var(--text3)">
-        <svg id="star-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-      </button>
     </div>
     <div class="player-controls">
       <div class="ctrl-buttons">
diff --git a/styles.css b/styles.css
index ac02626..35706e5 100644
--- a/styles.css
+++ b/styles.css
@@ -276,7 +276,8 @@ button:focus{outline:none}
 .player-art::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
 .player-art.spinning::after{opacity:1}
 @keyframes spin{to{transform:rotate(360deg)}}
-.player-info{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
+.player-info-wrap{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
+.player-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
 .player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;margin-bottom:2px}
 #player-artist-name{color:var(--accent)}
 #player-artist-name span:hover{color:var(--accent)}
@@ -919,6 +920,7 @@ button:focus{outline:none}
   }
   .player .player-art{width:46px!important;height:46px!important;border-radius:50%!important;flex-shrink:0}
   .player-track{max-width:none!important;width:100%!important;gap:8px}
+  .player-info-wrap{flex:1;min-width:0}
   .player-info{flex:1;min-width:0}
   .player-title{flex:1;min-width:0;font-size:12px!important}
   .player-artist{font-size:10px!important;margin-top:1px}