From 1f86881533adcb1515114c25cf02c33204cf2765 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <smedmunds226@gmail.com>
Date: Tue, 13 Oct 2026 13:52:24 -0500
Subject: [PATCH] Performance tweaks

---
 .../Theming/ThemePlaylists/ThemePlaylists.tsx | 38 ++++++++-----------
 .../components/ThemePlaylistStack.tsx         |  2 +-
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
index b9b6e6c..d5a71b2 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
@@ -166,7 +166,7 @@ export function ThemePlaylists() {
 				setSortBy={undefined}
 				customSearchEnabled={false}
 			/>
-			<Stack mt={isMobile ? '10rem' : '6rem'}>
+			<Stack mt={isMobile ? '10rem' : '6rem'} gap={'2rem'}>
 				<LoadingOverlay
 					visible={themePlaylistDataIsFetching}
 					zIndex={180}
@@ -203,13 +203,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
-										<ThemePlaylistStack
-											cardPlaylist={allStack}
-											handleOpen={handleOpen}
-											allThemes={allThemeData}
-										/>
-									</Box>
+									<ThemePlaylistStack
+										cardPlaylist={allStack}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
 								</Group>
 								<Group pos={'relative'}>
 									{'Backgrounds' === currentThemePlaylist && (
@@ -229,13 +227,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
-										<ThemePlaylistStack
-											cardPlaylist={backgroundsStack}
-											handleOpen={handleOpen}
-											allThemes={allThemeData}
-										/>
-									</Box>
+									<ThemePlaylistStack
+										cardPlaylist={backgroundsStack}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
 								</Group>
 								<Group pos={'relative'}>
 									{'No Backgrounds' === currentThemePlaylist && (
@@ -255,13 +251,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
-										<ThemePlaylistStack
-											cardPlaylist={noBackgroundsStack}
-											handleOpen={handleOpen}
-											allThemes={allThemeData}
-										/>
-									</Box>
+									<ThemePlaylistStack
+										cardPlaylist={noBackgroundsStack}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
 								</Group>
 								<Group pos={'relative'}>
 									{'Time of Day' === currentThemePlaylist && (
diff --git a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
index 5f27476..8b4bd7c 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
@@ -274,7 +274,7 @@ export function ThemePlaylistStack({
 										paddingLeft: '.25rem',
 										backgroundColor: 'var(--mantine-color-background-0)',
 										borderRadius: '16px',
-										color: 'var(--mantine-color-border-0)',
+										color: 'var(--mantine-color-accent-0)',
 										minWidth: '1.5rem',
 										textAlign: 'center',
 									}}