Updates to styles; misc bugfixes

src/pages/settings/components/Theming/ThemeCard.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useElementSize } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
 	allThemes: Theme[];
 	themePlaylists: ThemePlaylist[];
 }) {
+	const { ref, width } = useElementSize();
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
 					left: 6,
 					paddingRight: '.25rem',
 					paddingLeft: '.25rem',
-					backgroundColor: cardTheme.borderColor,
+					backgroundColor: cardTheme.backgroundColor,
 					borderRadius: '4px',
 					color:
 						cardTheme.borderColor === cardTheme.primaryColor
 							? cardTheme.accentColor
 							: cardTheme.primaryColor,
 					zIndex: 3,
+					boxShadow: `2px -2px ${cardTheme.borderColor}`,
+					textOverflow: 'ellipsis',
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					maxWidth: width,
 				}}
 			>
 				{cardTheme.name}
 			</Text>
 			<Button
+				ref={ref}
 				w={'275px'}
 				h={'115px'}
 				disabled={currentTheme === 'random'}