Fix queue container layout

This commit is contained in:
jeffvli 2023-06-09 03:37:38 -07:00 committed by Jeff
parent 7ab532be07
commit 3d409bb6f1

View file

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