Fix Lyric Scrolling Bug

plugins/radiant-lyrics-luna/src/index.ts

@@ -39,14 +39,18 @@ const updateButtonStates = function(): void {
     }
     if (unhideButton) {
         unhideButton.style.display = (settings.hideUIEnabled && isHidden) ? 'flex' : 'none';
+        // Remove the immediate hide class when button should be visible
+        if (settings.hideUIEnabled && isHidden) {
+            unhideButton.classList.remove('hide-immediately');
+        }
     }
 };
 
 // Function to update styles when settings change
 const updateRadiantLyricsStyles = function(): void {
     if (isHidden) {
-        // Apply all clean view styles
+        // Apply only base styles (button hiding), NOT separated lyrics styles
-        lyricsStyleTag.css = separatedLyrics;
+        // to avoid affecting lyrics scrolling behavior
         baseStyleTag.css = baseStyles;
         
         // Apply player bar styles based on setting
@@ -57,9 +61,9 @@ const updateRadiantLyricsStyles = function(): void {
         }
     }
 
-    // Update lyrics glow based on setting
+    // Update lyrics glow based on setting (only if UI is not hidden to avoid interference)
     const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
-    if (lyricsContainer) {
+    if (lyricsContainer && !isHidden) {
         if (settings.lyricsGlowEnabled) {
             lyricsContainer.classList.remove('lyrics-glow-disabled');
             lyricsGlowStyleTag.css = lyricsGlow;
@@ -189,20 +193,19 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
 (window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
 
 const toggleRadiantLyrics = function(): void {
-    // Toggle the state first
-    isHidden = !isHidden;
-    
     const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
     
     if (isHidden) {
-        // Apply clean view styles
+        // We're currently hidden, so we're about to show UI
-        updateRadiantLyricsStyles();
+        // Add a class to immediately hide the unhide button with CSS
-        // Add a class to the container to trigger CSS animations
+        const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
-        if (nowPlayingContainer) {
+        if (unhideButton) {
-            nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden');
+            unhideButton.classList.add('hide-immediately');
         }
-        document.body.classList.add('radiant-lyrics-ui-hidden');
+        
-    } else {
+        // Toggle the state
+        isHidden = !isHidden;
+        
         // Don't remove StyleTags completely, just remove the class to show elements again
         if (nowPlayingContainer) {
             nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden');
@@ -216,8 +219,25 @@ const toggleRadiantLyrics = function(): void {
                 playerBarStyleTag.remove();
             }
         }, 500); // Wait for fade animation to complete
+        
+        // Update button states normally
+        updateButtonStates();
+    } else {
+        // We're currently visible, so we're about to hide UI
+        // Toggle the state first
+        isHidden = !isHidden;
+        
+        // Apply clean view styles
+        updateRadiantLyricsStyles();
+        // Add a class to the container to trigger CSS animations
+        if (nowPlayingContainer) {
+            nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden');
+        }
+        document.body.classList.add('radiant-lyrics-ui-hidden');
+        
+        // Update button states immediately for hiding
+        updateButtonStates();
     }
-    updateButtonStates();
 };
 
 const createHideUIButton = function(): void {
@@ -309,8 +329,8 @@ const createUnhideUIButton = function(): void {
         // Style for top-right positioning within the Now Playing container (with safe margin)
         unhideUIButton.style.cssText = `
             position: absolute;
-            top: 20px;
+            top: 10px;
-            right: 80px;
+            right: 10px;
             background-color: rgba(255, 255, 255, 0.2);
             color: white;
             border: 1px solid rgba(255, 255, 255, 0.3);

plugins/radiant-lyrics-luna/src/separated-lyrics.css

@@ -40,19 +40,11 @@
     transition: opacity 0.4s ease-in-out;
 }
 
-/* Hide bottom gradient - only when UI is hidden */
+/* Keep bottom gradient visible - may be needed for lyrics scrolling */
-.radiant-lyrics-ui-hidden [class^="_bottomGradient"] {
-    opacity: 0 !important;
-    transition: opacity 0.4s ease-in-out;
-}
 
 /* Remove credits button repositioning - let it stay where it is */
 
-/* Hide lyrics provider - only when UI is hidden */
+/* Keep lyrics provider visible - don't hide with UI */
-.radiant-lyrics-ui-hidden [class^="_lyricsProvider"] {
-    opacity: 0 !important;
-    transition: opacity 0.4s ease-in-out;
-}
 
 /* Sync button margin */
 [class^="_syncButton"] {

plugins/radiant-lyrics-luna/src/styles.css

@@ -36,6 +36,14 @@
 
 /* Remove all layout-changing rules - only fade buttons, keep everything else in place */
 
+/* Immediate hide class for unhide button */
+.hide-immediately {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    transition: none !important;
+}
+
 [class^="_bar"] {
     background-color: transparent;
 }