From 90cca0f91705892ab09c7f32e17800b703479fa3 Mon Sep 17 00:00:00 2001
From: Himadri Bhattacharjee <107522312+lavafroth@users.noreply.github.com>
Date: Fri, 7 Feb 2025 09:48:58 +0530
Subject: [PATCH] Scale the lyrics page responsively

### Changes
- The lyrics text size is set to 1.875rem instead of 30px so it looks
proportionate on all devices
- Added a small breathing room of 0.5em around the lyrics container so
the text does not touch the screen edges on smaller devices
- Smoothly transition the opacity of each `lyricsLine`
---
 src/styles/lyrics.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss
index 8642dd05b1..0adf81ebd9 100644
--- a/src/styles/lyrics.scss
+++ b/src/styles/lyrics.scss
@@ -1,5 +1,7 @@
 .lyricPage {
     padding-top: 4.2em !important;
+    padding-left: 0.5em !important;
+    padding-right: 0.5em !important;
     display: flex;
     justify-content: center;
 }
@@ -13,9 +15,12 @@
     display: inline-block;
     width: fit-content;
     margin: 0.1em;
-    font-size: 30px;
+    font-size: 1.875rem;
     color: inherit;
     min-height: 2em;
+
+    transition-property: opacity;
+    transition-duration: 150ms;
 }
 
 .futureLyric {