diff --git a/src/components/MiniPlayer.tsx b/src/components/MiniPlayer.tsx index 79926a58..39050b28 100644 --- a/src/components/MiniPlayer.tsx +++ b/src/components/MiniPlayer.tsx @@ -326,41 +326,52 @@ export default function MiniPlayer() { return (
- {!IS_MACOS && ( -
+
+ {!IS_MACOS ? ( {track?.title ?? 'Psysonic Mini'} - - - + ) : ( + // macOS already shows the track title in the native titlebar; we + // just need a flexible spacer so the action buttons sit right. + + )} + + + + {/* macOS already provides Close via the red traffic light — skip + the duplicate so the in-app titlebar stays minimal. */} + {!IS_MACOS && ( -
- )} + )} +
diff --git a/src/styles/components.css b/src/styles/components.css index f8a48512..1117e6d7 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -9069,7 +9069,10 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active { box-sizing: border-box; } -/* ── Custom in-page titlebar (Linux + Windows; macOS keeps the native one) ── */ +/* ── Custom in-page titlebar. + Win/Linux: full bar with drag region, track title, and action buttons. + macOS: slim transparent bar holding only the action buttons; the + native titlebar above already shows title + close. ── */ .mini-player__titlebar { flex-shrink: 0; height: 26px; @@ -9080,6 +9083,13 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active { background: color-mix(in srgb, var(--bg-app) 85%, var(--bg-card) 15%); border-bottom: 1px solid var(--border-subtle); } +.mini-player__titlebar--mac { + height: 22px; + padding: 0 6px; + background: transparent; + border-bottom: none; + justify-content: flex-end; +} .mini-player__titlebar-title { flex: 1; font-size: 11px; @@ -9090,6 +9100,9 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active { text-overflow: ellipsis; letter-spacing: 0.02em; } +.mini-player__titlebar-spacer { + flex: 1; +} .mini-player__titlebar-btn { width: 22px; height: 22px;