Mobile improvements and packages updates

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

@@ -160,8 +160,13 @@ function ThemeModal({
 				<Modal.Body p={'2rem'}>
 					<ThemeModalContent selectedTheme={selectedTheme} />
 					<Divider color='black' my='sm' />
-					<Group w={'100%'} h={'100%'} gap={0}>
-						<Stack w={'50%'}>
+					<Group
+						w={'100%'}
+						h={'100%'}
+						gap={isMobile ? 20 : 0}
+						style={{ flexDirection: isMobile ? 'column' : 'row' }}
+					>
+						<Stack w={isMobile ? '100%' : '50%'}>
 							{pickerOpen ? (
 								<Group justify='center'>
 									<ColorPicker
@@ -330,7 +335,12 @@ function ThemeModal({
 								</Stack>
 							)}
 						</Stack>
-						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
+						<Stack
+							h={'100%'}
+							w={isMobile ? '100%' : '50%'}
+							align='center'
+							justify='center'
+						>
 							<Group gap={0}>
 								<Text mr={8}>Search:</Text>
 								<TextInput
@@ -393,7 +403,7 @@ function ThemeModal({
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />
-					<Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
+					<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
 						<Button
 							color={'green'}
 							styles={{ label: { color: 'black' } }}

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

@@ -149,7 +149,7 @@ function ThemesSettings() {
 				align='center'
 				pos={'relative'}
 				mt={isMobile ? '10rem' : '7rem'}
-				mb={isMobile ? '8rem' : '6.5rem'}
+				mb={isMobile ? '12rem' : '6.5rem'}
 			>
 				<Overlay
 					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -222,7 +222,7 @@ function ThemesSettings() {
 				style={{
 					backdropFilter: 'blur(10px) brightness(.75)',
 					zIndex: 199,
-					paddingTop: '1.5rem',
+					paddingTop: isMobile ? '.5rem' : '1.5rem',
 					paddingBottom: '1.5rem',
 					paddingLeft: '1rem',
 					paddingRight: '1rem',
@@ -230,7 +230,7 @@ function ThemesSettings() {
 					width: '100%',
 					marginTop: 0,
 					position: 'absolute',
-					bottom: 0,
+					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
 				<Group w={isMobile ? undefined : '100%'}>