From 72aa7231ef1d22f80a303353f9a639ea957a2e10 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Fri, 11 Jul 2025 18:48:16 -0500
Subject: [PATCH] Style fixes

---
 .../SettingsButton/SettingsCard.tsx           |  6 ++++--
 .../SettingsButton/WakeOnLanCard.tsx          |  1 +
 .../components/Applications/Applications.tsx  |  1 +
 .../Applications/DebouncedApplication.tsx     |  1 +
 .../Bookmarks/DebouncedGroupSettingsItem.tsx  |  1 +
 src/styles/MultiSelect.module.css             | 19 ++++++++++++++++---
 src/styles/Select.module.css                  |  4 +++-
 7 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
index 320ffa5..ad6e827 100644
--- a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
+++ b/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>
diff --git a/src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx b/src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx
index 1b495d2..0bbf115 100644
--- a/src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx
+++ b/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' }}
diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx
index b8cb075..5653d1b 100644
--- a/src/pages/settings/components/Applications/Applications.tsx
+++ b/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,
diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx
index 2240e64..9047c76 100644
--- a/src/pages/settings/components/Applications/DebouncedApplication.tsx
+++ b/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,
diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
index 0575b60..54e28e1 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
+++ b/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)'}
 			>
diff --git a/src/styles/MultiSelect.module.css b/src/styles/MultiSelect.module.css
index 587d153..4c4e250 100644
--- a/src/styles/MultiSelect.module.css
+++ b/src/styles/MultiSelect.module.css
@@ -1,7 +1,20 @@
 .label {
-	margin-bottom: .25rem !important;
-	color: var(--mantine-color-primary-0) !important;
-	font-size: .875rem !important;
+	position: absolute;
+	font-size: .75rem !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;
diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css
index e3beb48..00bd25a 100644
--- a/src/styles/Select.module.css
+++ b/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;