Additional styling changes

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
-            key={`tab-${item.label}`}
-            pos="relative"
-          >
+          <HeaderItemWrapper key={`tab-${item.label}`}>
             <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;
   }
 `;