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