fix bg color / padding of sidebar panel

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',
                                             })}

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);
 }

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}