Fix queue container layout
This commit is contained in:
parent
7ab532be07
commit
3d409bb6f1
1 changed files with 9 additions and 3 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Reference in a new issue