Fix radio card, suggestions height, and lyrics auto-scroll

- Radio card: Remove queue buttons (radio replaces entire queue)
- Suggestions panel: Add max-height 80vh like other panels
- Lyrics: Revert overflow change that broke auto-scroll
- Lyrics: Apply scrollbar-on-hover to internal LyricsLines component
This commit is contained in:
vicrodh committed 2026-02-01 07:53:54 -06:00
1 parent ed5e7d13cf
commit 8cdb63912c
2 files changed
+10 -27

No files matched your search

@@ -68,8 +68,7 @@
.lyrics-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overflow: hidden;
mask-image: linear-gradient(
to bottom,
transparent 0%,
@@ -86,40 +85,29 @@
);
}
/* Hide scrollbar by default, show on hover */
.lyrics-container::-webkit-scrollbar {
/* Scrollbar styles for internal LyricsLines component - show on hover */
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar) {
width: 6px;
opacity: 0;
}
.lyrics-container::-webkit-scrollbar-track {
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar-track) {
background: transparent;
}
.lyrics-container::-webkit-scrollbar-thumb {
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar-thumb) {
background: transparent;
border-radius: 3px;
transition: background 200ms ease;
}
.lyrics-container:hover::-webkit-scrollbar-thumb {
.lyrics-container:hover :global(.lyrics-lines::-webkit-scrollbar-thumb) {
background: rgba(255, 255, 255, 0.3);
}
.lyrics-container:hover::-webkit-scrollbar-thumb:hover {
.lyrics-container:hover :global(.lyrics-lines::-webkit-scrollbar-thumb:hover) {
background: rgba(255, 255, 255, 0.5);
}
/* Firefox */
.lyrics-container {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.lyrics-container:hover {
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.lyrics-container :global(.lyrics-lines) {
--text-primary: var(--alpha-95, rgba(255, 255, 255, 0.95));
--text-secondary: var(--alpha-50, rgba(255, 255, 255, 0.5));
@@ -276,17 +276,11 @@
<div class="card-glyph">
<Radio size={26} />
</div>
<!-- Hover overlay with actions -->
<!-- Hover overlay with play button only (radio replaces queue) -->
<div class="card-overlay">
<button class="overlay-btn secondary" onclick={() => onAddToQueue?.('radio', trackId)} title="Add to queue">
<ListPlus size={16} />
</button>
<button class="overlay-btn primary" onclick={startSongRadio} disabled={loadingRadio} title="Play">
<button class="overlay-btn primary" onclick={startSongRadio} disabled={loadingRadio} title="Play Radio">
<Play size={20} fill="currentColor" />
</button>
<button class="overlay-btn secondary" onclick={() => onPlayNext?.('radio', trackId)} title="Play next">
<ListEnd size={16} />
</button>
</div>
</div>
<div class="card-content">
@@ -339,6 +333,7 @@
.suggestions-panel {
flex: 1;
min-height: 0;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;