From 3d409bb6f1160f8af8ffa1a6342a8faff8807226 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 9 Jun 2023 03:37:38 -0700
Subject: [PATCH] Fix queue container layout

---
 .../player/components/full-screen-player-queue.tsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player-queue.tsx b/src/renderer/features/player/components/full-screen-player-queue.tsx
index 95a7d1d6..e15b709c 100644
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/src/renderer/features/player/components/full-screen-player-queue.tsx
@@ -1,4 +1,4 @@
-import { Stack, Group, Center } from '@mantine/core';
+import { Group, Center } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
@@ -41,6 +41,12 @@ const HeaderItemWrapper = styled.div`
   z-index: 2;
 `;
 
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: 1fr;
+`;
+
 export const FullScreenPlayerQueue = () => {
   const { activeTab } = useFullScreenPlayerStore();
   const { setStore } = useFullScreenPlayerStoreActions();
@@ -67,7 +73,7 @@ export const FullScreenPlayerQueue = () => {
   ];
 
   return (
-    <Stack className="full-screen-player-queue-container">
+    <GridContainer className="full-screen-player-queue-container">
       <Group
         grow
         align="center"
@@ -116,6 +122,6 @@ export const FullScreenPlayerQueue = () => {
       ) : activeTab === 'lyrics' ? (
         <Lyrics />
       ) : null}
-    </Stack>
+    </GridContainer>
   );
 };