Updates to styles; misc bugfixes

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

@@ -170,7 +170,7 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack mt={'1rem'} align='center'>
+			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
 				<Group
 					w={'85%'}
 					justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
-				<Group w={isMobile ? undefined : '100%'} justify='space-between'>
+				<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
 					<Text
-						miw={isMobile ? 100 : undefined}
+						w={'fit-content'}
 						className={textClasses.settingsSubTitle}
 						classNames={textClasses}
 						fz={isMobile ? '1rem' : undefined}
+						style={
+							isMobile
+								? {
+										position: 'absolute',
+										top: -16,
+										left: 4,
+										padding: '.25rem',
+										backgroundColor: 'var(--mantine-color-background-0)',
+										backdropFilter: 'blur(5px) brightness(.25)',
+										borderRadius: '10px',
+										boxShadow: '2px -2px var(--mantine-color-accent-0)',
+									}
+								: undefined
+						}
 					>
 						Current Settings:
 					</Text>
-					<Group
-						pos={isMobile ? undefined : 'absolute'}
-						w={isMobile ? undefined : '100%'}
-						justify='center'
-					>
+					<Group>
 						<Group>
 							<Text
 								style={{
-									color: 'var(--mantine-color-accent-0)',
+									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
 								}}
 							>