fix: lyric page bugs

src/views/lyrics.vue

@@ -3,18 +3,16 @@
     <div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
       <div
         v-if="settings.lyricsBackground !== false"
-        :class="[
+        class="lyrics-background"
-          'lyrics-background',
+        :class="{
-          { 'dynamic-background': settings.lyricsBackground === 'dynamic' },
+          'dynamic-background': settings.lyricsBackground === 'dynamic',
-        ]"
+        }"
       >
         <div
-          v-show="showLyrics"
           class="top-right"
           :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
         <div
-          v-show="showLyrics"
           class="bottom-left"
           :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
@@ -367,6 +365,7 @@ export default {
   z-index: 200;
   background: var(--color-body-bg);
   display: flex;
+  clip: rect(auto, auto, auto, auto);
 }
 
 .lyrics-background {
@@ -660,6 +659,15 @@ export default {
   }
 }
 
+@media (max-aspect-ratio: 10/9) {
+  .left-side {
+    display: none;
+  }
+  .right-side .lyrics-container {
+    max-width: 100%;
+  }
+}
+
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.4s;