Style fixes

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

@@ -85,7 +85,7 @@ function SettingsCard({
 							value={scale}
 							onChange={(value) => setScale(value)}
 							step={0.1}
-							min={0.25}
+							min={0.2}
 							max={3}
 							marks={[{ value: 1, label: 'Default' }]}
 							onDoubleClick={() => setScale(1)}
@@ -93,7 +93,7 @@ function SettingsCard({
 					</Stack>
 				)}
 			</Group>
-			<Group justify='center' mb={'.25rem'}>
+			<Group justify='center' mb={'.25rem'} pos={'relative'}>
 				<MultiSelect
 					label='Filter'
 					data={
@@ -124,6 +124,7 @@ function SettingsCard({
 					value={sort}
 					data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
 					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
 						root: selectClasses.menuSelectRoot,
 						input: selectClasses.menuSelectInput,
 						label: selectClasses.menuSelectLabel,
@@ -137,6 +138,7 @@ function SettingsCard({
 					onChange={(_value, option: ComboboxItem) => {
 						setSort(option.value);
 					}}
+					labelProps={{ top: 8 }}
 				/>
 			</Group>
 		</Stack>

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

@@ -19,6 +19,7 @@ function WakeOnLan({
 	return (
 		<Stack
 			gap={0}
+			pos={'relative'}
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
 			style={{ aspectRatio: isMobile ? undefined : '1/1' }}

src/pages/settings/components/Applications/Applications.tsx

@@ -206,6 +206,7 @@ const ApplicationSettings = () => {
 									label={'Icon'}
 									className={selectClasses.settingsItem}
 									classNames={{
+										wrapper: selectClasses.menuSelectWrapper,
 										input: selectClasses.menuSelectInput,
 										label: selectClasses.menuSelectLabel,
 										options: selectClasses.menuSelectOptions,

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -146,6 +146,7 @@ function DebouncedApplication({
 					label={'Icon'}
 					className={selectClasses.settingsItem}
 					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
 						input: selectClasses.menuSelectInput,
 						label: selectClasses.menuSelectLabel,
 						options: selectClasses.menuSelectOptions,

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -138,6 +138,7 @@ function DebouncedGroupSettingsItem({
 			/>
 			<Card.Section
 				p={'1rem'}
+				pt={0}
 				bg={'var(--mantine-color-search-0)'}
 				c={'var(--mantine-color-background-0)'}
 			>

src/styles/MultiSelect.module.css

@@ -1,7 +1,20 @@
 .label {
-	margin-bottom: .25rem !important;
+	position: absolute;
-	color: var(--mantine-color-primary-0) !important;
+	font-size: .75rem !important;
-	font-size: .875rem !important;
+	padding-left: .5rem;
+	padding-right: .5rem;
+	padding-top: .125rem;
+	padding-bottom: .125rem;
+	margin-left: -8px;
+	border-radius: 8px;
+	background-color: var(--mantine-color-primary-0);
+	color: var(--mantine-color-background-0);
+	box-shadow: 2px 2px var(--mantine-color-border-0);
+	z-index: 1;
+	top: 8px;
+}
+.wrapper {
+	margin-top: 1.75rem !important;
 }
 .input {
 	border-color: var(--mantine-color-border-0) !important;

src/styles/Select.module.css

@@ -1,6 +1,9 @@
 .menuSelectRoot {
 	width: 45%;
 }
+.menuSelectWrapper {
+	margin-top: 1.75rem !important;
+}
 .menuSelectLabel {
 	position: absolute;
 	font-size: .75rem !important;
@@ -17,7 +20,6 @@
 	top: 18px;
 }
 .menuSelectInput {
-	margin-top: 1.75rem;
 	border-color: var(--mantine-color-border-0) !important;
 	background-color: var(--mantine-color-background-0) !important;
 	color: var(--mantine-color-primary-0) !important;