Style bugfixes and updates

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

@@ -62,10 +62,11 @@ function SettingsButton() {
 			setWolClients(wolClientData);
 		}
 	}, [wolClientData, wolClientDataIsFetched]);
+
 	return (
 		<Menu
 			classNames={menuClasses}
-			width={isMobile ? '98%' : 'auto'}
+			width={isMobile ? '98%' : undefined}
 			withArrow
 			shadow='md'
 			position='top'
@@ -90,10 +91,7 @@ function SettingsButton() {
 			>
 				<Group p={'1rem'} gap={12}>
 					<Stack
-						justify='center'
-						align='center'
 						style={{
-							display: 'flex',
 							flexDirection: isMobile ? 'row' : 'column',
 							width: isMobile ? '100%' : undefined,
 						}}
@@ -106,7 +104,7 @@ function SettingsButton() {
 						/>
 						<ThemingCard />
 					</Stack>
-					<Stack display={'flex'} align='center'>
+					<Stack>
 						<SettingsCard
 							categories={categories}
 							sectionTitle={'Applications'}
@@ -129,7 +127,7 @@ function SettingsButton() {
 						/>
 					</Stack>
 				</Group>
-				<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
+				<Group mt={'-.75rem'} justify='center'>
 					<Button
 						leftSection={<FiSettings />}
 						onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}

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

@@ -31,7 +31,6 @@ function SettingsCard({
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			justify='space-between'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
@@ -61,7 +60,6 @@ function SettingsCard({
 				<Slider
 					className={sliderClasses.default}
 					classNames={sliderClasses}
-					restrictToMarks
 					value={density}
 					onChange={(value) => setDensity(value)}
 					min={1}

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

@@ -29,6 +29,7 @@ function ThemingCard() {
 		}
 	}, [allThemeData, allThemeDataIsFetched]);
 	const {
+		isMobile,
 		currentTheme,
 		setCurrentTheme,
 		setThemeName,
@@ -40,10 +41,9 @@ function ThemingCard() {
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
-			style={{ aspectRatio: '1/1' }}
+			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
 		>
 			<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
 			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>

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

@@ -1,4 +1,5 @@
 import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { FiPower } from 'react-icons/fi';
 import { buttonClasses, selectClasses, stackClasses } from 'styles';
 import type { WolClient } from 'types';
@@ -14,13 +15,13 @@ function WakeOnLan({
 	setSelectedClient: any;
 	handleWakeRequest: () => void;
 }) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
-			style={{ aspectRatio: '1/1' }}
+			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
 		>
 			<Menu.Label>Wake on LAN</Menu.Label>
 			<Button
@@ -31,12 +32,9 @@ function WakeOnLan({
 					handleWakeRequest();
 				}}
 			>
-				<Stack gap={0} align='center'>
-					<FiPower size={32} />
-				</Stack>
+				<FiPower size={32} />
 			</Button>
 			<Select
-				labelProps={{ display: 'none' }}
 				placeholder='Pick a host...'
 				defaultValue={wolClients?.[0]?.hostname}
 				onChange={(_, option: any) => {
@@ -45,6 +43,7 @@ function WakeOnLan({
 						macAddress: option?.macAddress,
 					});
 				}}
+				withCheckIcon={false}
 				data={
 					wolClients
 						?.map((wolClient: WolClient) => {