Style updates

src/pages/homepage/components/SettingsButton.tsx

@@ -86,9 +86,10 @@ function SettingsButton() {
 
 	return (
 		<>
-			{overlayOpened && <Overlay />}
+			{overlayOpened && <Overlay pos={'fixed'} />}
 			<Menu
 				classNames={menuClasses}
+				width={isMobile ? '98%' : '500px'}
 				withinPortal={false}
 				withArrow
 				shadow='md'
@@ -111,8 +112,7 @@ function SettingsButton() {
 									cursor: 'pointer',
 									position: 'absolute',
 									top: '.5rem',
-									right: isMobile ? undefined : '.5rem',
-									left: isMobile ? '.5rem' : undefined,
+									right: '.5rem',
 								}}
 							/>
 						</Tooltip>
@@ -142,15 +142,18 @@ function SettingsButton() {
 									placeholder='Pick a host...'
 									defaultValue={wolClientsData?.[0]?.hostname}
 									data={
-										wolClientsData?.map((wolClient: any) => {
-											return {
-												value: wolClient.hostname,
-												label: `${wolClient.hostname} (${wolClient.macAddress})`,
-												hostname: wolClient.hostname,
-												macAddress: wolClient.macAddress,
-											};
-										}) || []
+										wolClientsData
+											?.map((wolClient: any) => {
+												return {
+													value: wolClient.hostname,
+													label: `${wolClient.hostname} (${wolClient.macAddress})`,
+													hostname: wolClient.hostname,
+													macAddress: wolClient.macAddress,
+												};
+											})
+											.toSorted((a: any, b: any) => a.label.localeCompare(b.label)) || []
 									}
+									w='92%'
 									classNames={selectClasses}
 									className={selectClasses.default}
 									comboboxProps={{ withinPortal: false }}
@@ -225,10 +228,14 @@ function SettingsButton() {
 							classNames={stackClasses}
 						>
 							<Menu.Label>Filters</Menu.Label>
-							<Group>
+							<Group justify='space-between' px={'.5rem'}>
 								<MultiSelect
 									label='Apps'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										appFilter.length > 0
 											? appFilter.length === 1
@@ -245,7 +252,11 @@ function SettingsButton() {
 								/>
 								<MultiSelect
 									label='Bookmarks'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										bookmarkFilter.length > 0
 											? bookmarkFilter.length === 1