From eeefe9d9dcce30cc2ba4c12ef5a3eaebf95d69cb Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 9 Jun 2023 16:45:54 -0700
Subject: [PATCH] Add updated scroll container to unsync lyrics

---
 .../features/lyrics/unsynchronized-lyrics.tsx  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index ec14d94f..f602e2cb 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -8,7 +8,23 @@ interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
 }
 
 const UnsynchronizedLyricsContainer = styled.div`
-  padding: 5rem 0;
+  width: 100%;
+  height: 100%;
+  padding: 10vh 0 6vh;
+  overflow: scroll;
+  transform: translateY(-2rem);
+
+  mask-image: linear-gradient(
+    180deg,
+    transparent 5%,
+    rgba(0, 0, 0, 100%) 20%,
+    rgba(0, 0, 0, 100%) 85%,
+    transparent 95%
+  );
+
+  @media screen and (max-width: 768px) {
+    padding: 5vh 0;
+  }
 `;
 
 export const UnsynchronizedLyrics = ({