Move scroll container to wrap lyrics only

src/renderer/features/lyrics/lyrics.tsx

@@ -1,13 +1,40 @@
 import { Center, Group } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
+import styled from 'styled-components';
 import { useSongLyrics } from './queries/lyric-query';
 import { SynchronizedLyrics } from './synchronized-lyrics';
-import { Spinner, TextTitle } from '/@/renderer/components';
+import { ScrollArea, Spinner, TextTitle } from '/@/renderer/components';
 import { ErrorFallback } from '/@/renderer/features/action-required';
 import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { getServerById, useCurrentSong } from '/@/renderer/store';
 
+const LyricsScrollContainer = styled(ScrollArea)`
+  z-index: 1;
+  text-align: center;
+  transform: translateY(-2rem);
+
+  mask-image: linear-gradient(
+    180deg,
+    transparent 5%,
+    rgba(0, 0, 0, 100%) 20%,
+    rgba(0, 0, 0, 100%) 85%,
+    transparent 95%
+  );
+
+  &.mantine-ScrollArea-root {
+    height: 100%;
+  }
+
+  & .mantine-ScrollArea-viewport {
+    height: 100% !important;
+  }
+
+  & .mantine-ScrollArea-viewport > div {
+    height: 100%;
+  }
+`;
+
 export const Lyrics = () => {
   const currentSong = useCurrentSong();
   const currentServer = getServerById(currentSong?.serverId);
@@ -28,7 +55,7 @@ export const Lyrics = () => {
           size={25}
         />
       ) : !data?.lyrics ? (
-        <Center p="2rem">
+        <Center>
           <Group>
             <RiInformationFill size="2rem" />
             <TextTitle
@@ -40,7 +67,7 @@ export const Lyrics = () => {
           </Group>
         </Center>
       ) : (
-        <>
+        <LyricsScrollContainer>
           {Array.isArray(data.lyrics) ? (
             <SynchronizedLyrics
               lyrics={data.lyrics}
@@ -56,7 +83,7 @@ export const Lyrics = () => {
               onRemoveLyric={() => {}}
             />
           )}
-        </>
+        </LyricsScrollContainer>
       )}
     </ErrorBoundary>
   );

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Button, ScrollArea, TextTitle } from '/@/renderer/components';
+import { Button, TextTitle } from '/@/renderer/components';
 import { PlayQueue } from '/@/renderer/features/now-playing';
 import {
   useFullScreenPlayerStore,
@@ -27,32 +27,6 @@ const QueueContainer = styled.div`
   }
 `;
 
-const LyricsContainer = styled(ScrollArea)`
-  z-index: 1;
-  text-align: center;
-  transform: translateY(-2rem);
-
-  mask-image: linear-gradient(
-    180deg,
-    transparent 5%,
-    rgba(0, 0, 0, 100%) 20%,
-    rgba(0, 0, 0, 100%) 85%,
-    transparent 95%
-  );
-
-  &.mantine-ScrollArea-root {
-    height: 100%;
-  }
-
-  & .mantine-ScrollArea-viewport {
-    height: 100% !important;
-  }
-
-  & .mantine-ScrollArea-viewport > div {
-    height: 100%;
-  }
-`;
-
 const ActiveTabIndicator = styled(motion.div)`
   position: absolute;
   bottom: 0;
@@ -140,9 +114,7 @@ export const FullScreenPlayerQueue = () => {
           </Group>
         </Center>
       ) : activeTab === 'lyrics' ? (
-        <LyricsContainer scrollHideDelay={0}>
+        <Lyrics />
-          <Lyrics />
-        </LyricsContainer>
       ) : null}
     </Stack>
   );