Additional styling changes

src/renderer/features/lyrics/synchronized-lyrics.tsx

@@ -12,12 +12,11 @@ import isElectron from 'is-electron';
 import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
 import { SynchronizedLyricsArray } from '/@/renderer/api/types';
 import styled from 'styled-components';
-import { Text } from '/@/renderer/components';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
 const SynchronizedLyricsContainer = styled.div`
-  padding: 3rem 0 10rem;
+  padding: 5rem 0;
 `;
 
 interface SynchronizedLyricsProps {
@@ -211,7 +210,12 @@ export const SynchronizedLyrics = ({ lyrics, source }: SynchronizedLyricsProps)
 
   return (
     <SynchronizedLyricsContainer className="synchronized-lyrics">
-      {source && <Text $noSelect>Lyrics provided by: {source}</Text>}
+      {source && (
+        <LyricLine
+          className="lyric-credit"
+          text={`Lyrics provided by ${source}`}
+        />
+      )}
       {lyrics.map(([, text], idx) => (
         <LyricLine
           key={idx}

src/renderer/features/lyrics/unsynchronized-lyrics.tsx

@@ -14,7 +14,7 @@ export const UnsynchronizedLyrics = ({ lyrics, source }: UnsynchronizedLyricsPro
 
   return (
     <div className="unsynchronized-lyrics">
-      {source && <Text $noSelect>Lyrics provided by: {source}</Text>}
+      {source && <Text $noSelect>Lyrics provided by {source}</Text>}
       {lines.map((text, idx) => (
         <LyricLine
           key={idx}

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,4 +1,4 @@
-import { Stack, Group, Center, Box } from '@mantine/core';
+import { Stack, Group, Center } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
@@ -28,7 +28,9 @@ const QueueContainer = styled.div`
 `;
 
 const LyricsContainer = styled(ScrollArea)`
+  z-index: 1;
   text-align: center;
+  transform: translateY(-2rem);
 
   mask-image: linear-gradient(
     180deg,
@@ -48,6 +50,11 @@ const ActiveTabIndicator = styled(motion.div)`
   background: var(--main-fg);
 `;
 
+const HeaderItemWrapper = styled.div`
+  position: relative;
+  z-index: 2;
+`;
+
 export const FullScreenPlayerQueue = () => {
   const { activeTab } = useFullScreenPlayerStore();
   const { setStore } = useFullScreenPlayerStoreActions();
@@ -81,10 +88,7 @@ export const FullScreenPlayerQueue = () => {
         position="center"
       >
         {headerItems.map((item) => (
-          <Box
+          <HeaderItemWrapper key={`tab-${item.label}`}>
-            key={`tab-${item.label}`}
-            pos="relative"
-          >
             <Button
               fullWidth
               uppercase
@@ -104,7 +108,7 @@ export const FullScreenPlayerQueue = () => {
               {item.label}
             </Button>
             {item.active ? <ActiveTabIndicator layoutId="underline" /> : null}
-          </Box>
+          </HeaderItemWrapper>
         ))}
       </Group>
       {activeTab === 'queue' ? (

src/renderer/features/player/components/full-screen-player.tsx

@@ -35,9 +35,9 @@ const ResponsiveContainer = styled.div`
   margin-top: 5rem;
 
   @media screen and (max-width: 768px) {
-    flex-direction: row;
     grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
     grid-template-columns: minmax(0, 1fr);
+    margin-top: 0;
   }
 `;
 

src/renderer/types.ts

@@ -178,6 +178,6 @@ export type GridCardData = {
 };
 
 export enum LyricSource {
-  GENIUS = 'genius',
+  GENIUS = 'Genius',
-  NETEASE = 'netease',
+  NETEASE = 'NetEase',
 }