Updates to styles; misc bugfixes

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

@@ -18,6 +18,8 @@ function SettingsCard({
 	setSort,
 	density,
 	setDensity,
+	scale,
+	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
 	setSort: any;
 	density: any;
 	setDensity: any;
+	scale: any;
+	setScale: any;
 }) {
 	return (
 		<Stack
@@ -53,19 +57,41 @@ function SettingsCard({
 			>
 				{sectionTitle}
 			</Text>
-			<Text fz={'.875rem'} mt={'1rem'}>
-				Density
-			</Text>
-			<Stack m={0} p={0} gap={0} w={'90%'}>
-				<Slider
-					className={sliderClasses.default}
-					classNames={sliderClasses}
-					value={density}
-					onChange={(value) => setDensity(value)}
-					min={1}
-					max={8}
-				/>
-			</Stack>
+			<Group w={'100%'} justify='center'>
+				<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
+					<Text fz={'.875rem'} mt={'1rem'}>
+						Density
+					</Text>
+					<Slider
+						className={sliderClasses.default}
+						classNames={sliderClasses}
+						value={density}
+						onChange={(value) => setDensity(value)}
+						min={1}
+						max={8}
+						marks={[{ value: 6, label: 'Default' }]}
+						onDoubleClick={() => setDensity(6)}
+					/>
+				</Stack>
+				{scale !== undefined && (
+					<Stack w={'33%'} align='center'>
+						<Text fz={'.875rem'} mt={'1rem'}>
+							Scale
+						</Text>
+						<Slider
+							className={sliderClasses.default}
+							classNames={sliderClasses}
+							value={scale}
+							onChange={(value) => setScale(value)}
+							step={0.1}
+							min={0.5}
+							max={2}
+							marks={[{ value: 1, label: 'Default' }]}
+							onDoubleClick={() => setScale(1)}
+						/>
+					</Stack>
+				)}
+			</Group>
 			<Group justify='center' mb={'.25rem'}>
 				<MultiSelect
 					label='Filter'