From c5f551e9637475c760c9b08117cd7d2062ca8fb2 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 13 Jun 2023 18:44:39 -0700
Subject: [PATCH] Use flex gap instead of line height for lyrics

---
 src/renderer/features/lyrics/lyric-line.tsx            | 1 -
 src/renderer/features/lyrics/synchronized-lyrics.tsx   | 3 +++
 src/renderer/features/lyrics/unsynchronized-lyrics.tsx | 3 +++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/lyrics/lyric-line.tsx b/src/renderer/features/lyrics/lyric-line.tsx
index 5a5a23d2..7b592f0a 100644
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/src/renderer/features/lyrics/lyric-line.tsx
@@ -10,7 +10,6 @@ const StyledText = styled(TextTitle)`
   color: var(--main-fg);
   font-weight: 400;
   font-size: 2.5vmax;
-  line-height: 1.5;
   transform: scale(0.95);
   opacity: 0.5;
 
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index b27f635a..c51304c1 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -16,6 +16,9 @@ import styled from 'styled-components';
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
 const SynchronizedLyricsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
   width: 100%;
   height: 100%;
   padding: 10vh 0 6vh;
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index f602e2cb..f498a9b9 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -8,6 +8,9 @@ interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
 }
 
 const UnsynchronizedLyricsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
   width: 100%;
   height: 100%;
   padding: 10vh 0 6vh;