From b2941b67d67554874a8c069b6ad3b9ebf0a10c00 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 15 Dec 2025 01:12:11 -0800
Subject: [PATCH] fix bg color / padding of sidebar panel

---
 src/renderer/features/lyrics/lyrics.tsx           | 15 ++++++++++++---
 .../components/sidebar-play-queue.module.css      |  4 ++++
 .../now-playing/components/sidebar-play-queue.tsx |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index cdc8e1d23..8041c402b 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -32,7 +32,11 @@ import {
     StructuredLyric,
 } from '/@/shared/types/domain-types';
 
-export const Lyrics = () => {
+type LyricsProps = {
+    fadeOutNoLyricsMessage?: boolean;
+};
+
+export const Lyrics = ({ fadeOutNoLyricsMessage = true }: LyricsProps) => {
     const currentSong = usePlayerSong();
     const {
         enableAutoTranslation,
@@ -265,6 +269,11 @@ export const Lyrics = () => {
 
     // Trigger fade out after a few seconds when no lyrics are found
     useEffect(() => {
+        if (!fadeOutNoLyricsMessage) {
+            setShouldFadeOut(false);
+            return undefined;
+        }
+
         if (!isLoadingLyrics && hasNoLyrics) {
             // Start fade out after 3 seconds (message visible for 3s, then 0.5s fade)
             const timer = setTimeout(() => {
@@ -279,7 +288,7 @@ export const Lyrics = () => {
         }
 
         return undefined;
-    }, [isLoadingLyrics, hasNoLyrics]);
+    }, [isLoadingLyrics, hasNoLyrics, fadeOutNoLyricsMessage]);
 
     return (
         <ComponentErrorBoundary>
@@ -296,7 +305,7 @@ export const Lyrics = () => {
                                     transition={{ duration: 0.5 }}
                                 >
                                     <Group>
-                                        <Text fw={500}>
+                                        <Text fw={500} isMuted isNoSelect>
                                             {t('page.fullscreenPlayer.noLyrics', {
                                                 postProcess: 'sentenceCase',
                                             })}
diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.module.css b/src/renderer/features/now-playing/components/sidebar-play-queue.module.css
index 7bd645a6c..7075476a1 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.module.css
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.module.css
@@ -13,8 +13,10 @@
     flex-direction: column;
     min-height: 200px;
     max-height: 400px;
+    padding: var(--theme-spacing-md);
     overflow: hidden;
     background: var(--theme-colors-background);
+    background-color: var(--theme-colors-background-alternate);
 }
 
 .lyrics-section :global(.synchronized-lyrics) {
@@ -43,6 +45,8 @@
     flex-direction: column;
     min-height: 200px;
     max-height: 400px;
+    padding: var(--theme-spacing-md);
     overflow: hidden;
     background: var(--theme-colors-background);
+    background-color: var(--theme-colors-background-alternate);
 }
diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
index a9b0d21ad..3e138c3d7 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@@ -93,7 +93,7 @@ const BottomPanel = () => {
             <Divider />
             {showLyricsInSidebar ? (
                 <div className={styles.lyricsSection}>
-                    <Lyrics />
+                    <Lyrics fadeOutNoLyricsMessage={showVisualizer} />
                     {showVisualizer && (
                         <div
                             className={styles.visualizerOverlay}