[ENG-1456] General UI Tweaks (#1819)

* General UI Tweaks

* Update general.tsx

* Update general.tsx

interface/app/$libraryId/settings/Setting.tsx

@@ -10,6 +10,7 @@ interface Props {
 	description?: string | JSX.Element;
 	mini?: boolean;
 	className?: string;
+	containerClassName?: string;
 	toolTipLabel?: string | boolean;
 	infoUrl?: string;
 }
@@ -22,7 +23,7 @@ export default ({ mini, registerName, ...props }: PropsWithChildren<Props>) => {
 
 	return (
 		<>
-			<div className="relative flex flex-row">
+			<div className={clsx('relative flex flex-row', props.containerClassName)}>
 				<div className={clsx('flex w-full flex-col', !mini && 'pb-6', props.className)}>
 					<div className="mb-1 flex items-center gap-1">
 						<h3 className="text-sm font-medium text-ink">{props.title}</h3>

interface/app/$libraryId/settings/client/general.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { useEffect } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import {
 	getDebugState,
@@ -82,13 +81,11 @@ export const Component = () => {
 		node.refetch();
 	});
 
-	useEffect(() => {
-		form.watch((data) => {
-			if (Number(data.p2p_port) > 65535) {
-				form.setValue('p2p_port', 65535);
-			}
-		});
-	}, [form]);
+	form.watch((data) => {
+		if (Number(data.p2p_port) > 65535) {
+			form.setValue('p2p_port', 65535);
+		}
+	});
 
 	return (
 		<FormProvider {...form}>
@@ -184,9 +181,10 @@ export const Component = () => {
 				<Setting
 					mini
 					title="Full disk access"
+					containerClassName="items-start"
 					description="Enable full disk access to allow Spacedrive to index additional files."
 				>
-					<Button onClick={requestFdaMacos} variant="gray" size="sm" className="my-5">
+					<Button onClick={requestFdaMacos} variant="gray" size="sm">
 						Enable
 					</Button>
 				</Setting>
@@ -209,7 +207,7 @@ export const Component = () => {
 				title="Thumbnailer CPU usage"
 				description="Limit how much CPU the thumbnailer can use for background processing."
 			>
-				<div className="flex w-80 gap-2">
+				<div className="flex h-[30px] w-80 items-center gap-2">
 					<Slider
 						onValueChange={(value) => {
 							if (value.length > 0) {
@@ -222,7 +220,8 @@ export const Component = () => {
 						value={[watchBackgroundProcessingPercentage]}
 					/>
 					<Input
-						className="after:h-initial relative w-[8ch] after:absolute after:right-[0.8em] after:top-1/2 after:inline-block after:-translate-y-2/4 after:content-['%']"
+						className="after:h-initial relative h-[30px] w-[8ch]
+						after:absolute after:right-[0.8em] after:top-1/2 after:inline-block after:-translate-y-2/4 after:content-['%']"
 						defaultValue={
 							node.data?.preferences.thumbnailer.background_processing_percentage ||
 							75
@@ -275,14 +274,15 @@ export const Component = () => {
 					title="Networking Port"
 					description="The port for Spacedrive's Peer-to-peer networking to communicate on. You should leave this disabled unless you have a restictive firewall. Do not expose to the internet!"
 				>
-					<div className="flex gap-2">
+					<div className="flex h-[30px] gap-2">
 						<Controller
 							control={form.control}
 							name="customOrDefault"
 							render={({ field }) => (
 								<Select
+									containerClassName="h-[30px]"
 									disabled={!watchP2pEnabled}
-									className={clsx(!watchP2pEnabled && 'opacity-50')}
+									className={clsx(!watchP2pEnabled && 'opacity-50', 'h-full')}
 									{...field}
 									onChange={(e) => {
 										field.onChange(e);

packages/ui/src/Select.tsx

@@ -38,6 +38,7 @@ export interface SelectProps<TValue extends string = string>
 	placeholder?: string;
 	className?: string;
 	disabled?: boolean;
+	containerClassName?: string;
 }
 
 export const Select = forwardRef(
@@ -45,7 +46,7 @@ export const Select = forwardRef(
 		props: PropsWithChildren<SelectProps<TValue>>,
 		ref: React.ForwardedRef<HTMLDivElement>
 	) => (
-		<div ref={ref}>
+		<div className={props.containerClassName} ref={ref}>
 			<RS.Root
 				defaultValue={props.value}
 				value={props.value}