Minor style fix

src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx

@@ -126,7 +126,7 @@ export function ThemePlaylistStack({
 			);
 		}
 	}, [indexOffset]);
-	
+
 	return (
 		<Popover
 			withArrow
@@ -136,166 +136,167 @@ export function ThemePlaylistStack({
 			transitionProps={{ duration: 200, timingFunction: 'ease' }}
 		>
 			<Popover.Target>
-				<Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
+				<Box>
-					<Stack
+					<Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
-						gap={0}
-						w={300}
-						pos={'relative'}
-						onMouseEnter={() => setHover(true)}
-						onMouseLeave={() => setHover(false)}
-						style={{
-							background: hover
-								? 'radial-gradient(var(--mantine-color-search-0), transparent)'
-								: undefined,
-							cursor: 'pointer',
-							borderRadius: '100%',
-						}}
-						onClick={() => {
-							setCurrentThemePlaylist(cardPlaylist.name);
-							setThemeName('random');
-						}}
-					>
-						{modalOpened && (
-							<DeleteItemModal
-								modalOpened={modalOpened}
-								handleClose={closeModal}
-								handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
-								title='Delete Theme Playlist'
-								body={
-									<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-										<Text>Are you sure you want to delete this Theme Playlist?</Text>
-										<Text
-											className={textClasses.deleteItem}
-											classNames={textClasses}
-										>{`"${cardPlaylist.name}"`}</Text>
-										<Text c='red'>This action cannot be undone!</Text>
-									</Stack>
-								}
-							/>
-						)}
 						<Stack
-							w='100%'
-							h='200px'
-							justify='start'
-							pos='relative'
 							gap={0}
+							w={300}
+							pos={'relative'}
+							onMouseEnter={() => setHover(true)}
+							onMouseLeave={() => setHover(false)}
 							style={{
-								overflow: 'hidden',
+								background: hover
-								transition: 'all 0.5s ease-in-out',
+									? 'radial-gradient(var(--mantine-color-search-0), transparent)'
-								overscrollBehavior: 'contain',
+									: undefined,
+								cursor: 'pointer',
+								borderRadius: '100%',
+							}}
+							onClick={() => {
+								setCurrentThemePlaylist(cardPlaylist.name);
+								setThemeName('random');
 							}}
-							onWheel={handleMouseWheel}
 						>
-							{cardPlaylist?.name === 'Time of Day' ? (
+							{modalOpened && (
-								<>
+								<DeleteItemModal
-									<Parallax
+									modalOpened={modalOpened}
-										{...presentationProps}
+									handleClose={closeModal}
-										style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
+									handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
-									>
+									title='Delete Theme Playlist'
-										<ThemeCardPreview
+									body={
-											cardTheme={
+										<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-												allThemes.find(
+											<Text>Are you sure you want to delete this Theme Playlist?</Text>
-													(theme: Theme) => theme.id === Number(themeList[0]),
+											<Text
-												) || missingTheme
+												className={textClasses.deleteItem}
-											}
+												classNames={textClasses}
-										/>
+											>{`"${cardPlaylist.name}"`}</Text>
-									</Parallax>
+											<Text c='red'>This action cannot be undone!</Text>
-									<Parallax
+										</Stack>
-										{...presentationProps}
+									}
-										style={{ position: 'absolute', top: 16 * 2, zIndex: 2 }}
+								/>
-									>
-										<ThemeCardPreview
-											cardTheme={
-												allThemes.find(
-													(theme: Theme) => theme.id === Number(themeList[1]),
-												) || missingTheme
-											}
-										/>
-									</Parallax>
-									<Parallax
-										{...presentationProps}
-										style={{ position: 'absolute', top: 16 * 3, zIndex: 1 }}
-									>
-										<ThemeCardPreview
-											cardTheme={
-												allThemes.find(
-													(theme: Theme) => theme.id === Number(themeList[2]),
-												) || missingTheme
-											}
-										/>
-									</Parallax>
-									<Parallax
-										{...presentationProps}
-										style={{ position: 'absolute', top: 16 * 4, zIndex: 0 }}
-									>
-										<ThemeCardPreview
-											cardTheme={
-												allThemes.find(
-													(theme: Theme) => theme.id === Number(themeList[3]),
-												) || missingTheme
-											}
-										/>
-									</Parallax>
-								</>
-							) : (
-								items
 							)}
-						</Stack>
+							<Stack
-
+								w='100%'
-						<Group
+								h='200px'
-							w={'100%'}
+								justify='start'
-							pos={'absolute'}
+								pos='relative'
-							justify='space-between'
+								gap={0}
-							bottom={0}
-							style={{ zIndex: 1000 }}
-						>
-							<Text
 								style={{
-									paddingRight: '.25rem',
+									overflow: 'hidden',
-									paddingLeft: '.25rem',
+									transition: 'all 0.5s ease-in-out',
-									backgroundColor: 'var(--mantine-color-border-0)',
+									overscrollBehavior: 'contain',
-									borderRadius: '4px',
-									color: 'var(--mantine-color-primary-0)',
 								}}
+								onWheel={handleMouseWheel}
 							>
-								{cardPlaylist.name}
+								{cardPlaylist?.name === 'Time of Day' ? (
-							</Text>
+									<>
-							<Group gap={0}>
+										<Parallax
-								{!defaultLists.includes(cardPlaylist.name) && (
+											{...presentationProps}
-									<ActionIcon
+											style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
-										style={{
+										>
-											paddingRight: '.25rem',
+											<ThemeCardPreview
-											paddingLeft: '.25rem',
+												cardTheme={
-											backgroundColor: 'var(--mantine-color-border-0)',
+													allThemes.find(
-											borderRadius: '4px',
+														(theme: Theme) => theme.id === Number(themeList[0]),
-											color: 'var(--mantine-color-background-0)',
+													) || missingTheme
-										}}
+												}
-										onClick={() => {
+											/>
-											handleOpen(cardPlaylist);
+										</Parallax>
-										}}
+										<Parallax
-									>
+											{...presentationProps}
-										<FiEdit />
+											style={{ position: 'absolute', top: 16 * 2, zIndex: 2 }}
-									</ActionIcon>
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[1]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+										<Parallax
+											{...presentationProps}
+											style={{ position: 'absolute', top: 16 * 3, zIndex: 1 }}
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[2]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+										<Parallax
+											{...presentationProps}
+											style={{ position: 'absolute', top: 16 * 4, zIndex: 0 }}
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[3]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+									</>
+								) : (
+									items
 								)}
-								{cardPlaylist.default === 0 && (
+							</Stack>
-									<ActionIcon
+						</Stack>
-										color='red'
+					</Reflection>
-										style={{
+					<Group
-											paddingRight: '.25rem',
+						w={'100%'}
-											paddingLeft: '.25rem',
+						pos={'absolute'}
-											borderRadius: '4px',
+						justify='space-between'
-										}}
+						bottom={0}
-										onClick={() => {
+						style={{ zIndex: 1000 }}
-											openModal();
+					>
-										}}
+						<Text
-									>
+							style={{
-										<FiTrash color='black' />
+								paddingRight: '.25rem',
-									</ActionIcon>
+								paddingLeft: '.25rem',
-								)}
+								backgroundColor: 'var(--mantine-color-border-0)',
-							</Group>
+								borderRadius: '4px',
+								color: 'var(--mantine-color-primary-0)',
+							}}
+						>
+							{cardPlaylist.name}
+						</Text>
+						<Group gap={0}>
+							{!defaultLists.includes(cardPlaylist.name) && (
+								<ActionIcon
+									style={{
+										paddingRight: '.25rem',
+										paddingLeft: '.25rem',
+										backgroundColor: 'var(--mantine-color-border-0)',
+										borderRadius: '4px',
+										color: 'var(--mantine-color-background-0)',
+									}}
+									onClick={() => {
+										handleOpen(cardPlaylist);
+									}}
+								>
+									<FiEdit />
+								</ActionIcon>
+							)}
+							{cardPlaylist.default === 0 && (
+								<ActionIcon
+									color='red'
+									style={{
+										paddingRight: '.25rem',
+										paddingLeft: '.25rem',
+										borderRadius: '4px',
+									}}
+									onClick={() => {
+										openModal();
+									}}
+								>
+									<FiTrash color='black' />
+								</ActionIcon>
+							)}
 						</Group>
-					</Stack>
+					</Group>
-				</Reflection>
+				</Box>
 			</Popover.Target>
 			<Popover.Dropdown
 				bg={'var(--mantine-color-primary-0)'}