Mobile improvements and packages updates

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -101,7 +101,15 @@ function SettingsButton() {
 	}, [allThemeData, allThemeDataIsFetched]);
 	return (
 		<>
-			{overlayOpened && <Overlay pos={'fixed'} />}
+			{overlayOpened && (
+				<Overlay
+					pos={'fixed'}
+					blur={3}
+					onTouchStart={(e) => {
+						e.stopPropagation();
+					}}
+				/>
+			)}
 			<Menu
 				classNames={menuClasses}
 				width={isMobile ? '98%' : 'auto'}
@@ -126,7 +134,15 @@ function SettingsButton() {
 					}}
 				>
 					<Group p={'1rem'} gap={12}>
-						<Stack display={'flex'} align='center'>
+						<Stack
+							justify='center'
+							align='center'
+							style={{
+								display: 'flex',
+								flexDirection: isMobile ? 'row' : 'column',
+								width: isMobile ? '100%' : undefined,
+							}}
+						>
 							<Stack
 								gap={0}
 								align='center'
@@ -167,6 +183,7 @@ function SettingsButton() {
 									}
 									w='92%'
 									classNames={{
+										root: selectClasses.menuSelectRoot,
 										input: selectClasses.menuSelectInput,
 										label: selectClasses.menuSelectLabel,
 										options: selectClasses.menuSelectOptions,
@@ -263,6 +280,7 @@ function SettingsButton() {
 									}
 									w='92%'
 									classNames={{
+										root: selectClasses.menuSelectRoot,
 										input: selectClasses.menuSelectInput,
 										label: selectClasses.menuSelectLabel,
 										options: selectClasses.menuSelectOptions,
@@ -270,7 +288,6 @@ function SettingsButton() {
 									}}
 									comboboxProps={{
 										withinPortal: false,
-										width: 'fit-content',
 									}}
 									onChange={(_value, option: ComboboxItem) => {
 										setCurrentThemePlaylist(option.value);
@@ -364,6 +381,7 @@ function SettingsButton() {
 										value={appSort}
 										data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
 										classNames={{
+											root: selectClasses.menuSelectRoot,
 											input: selectClasses.menuSelectInput,
 											label: selectClasses.menuSelectLabel,
 											options: selectClasses.menuSelectOptions,
@@ -451,6 +469,7 @@ function SettingsButton() {
 											label: selectClasses.menuSelectLabel,
 											options: selectClasses.menuSelectOptions,
 											option: selectClasses.menuSelectOption,
+											root: selectClasses.menuSelectRoot,
 										}}
 										comboboxProps={{
 											withinPortal: false,