adjust styling

src/lib/Combobox.svelte

@@ -169,13 +169,17 @@
 		const highlightedElement = pickerContainer.querySelector(`[data-id="${highlighted.value}"]`);
 		if (!highlightedElement) return;
 
-		const rect = highlightedElement.getBoundingClientRect();
-		const pickerRect = pickerContainer.getBoundingClientRect();
+		const containerTop = pickerContainer.scrollTop;
+		const containerHeight = pickerContainer.clientHeight;
+		const elementOffsetTop = (highlightedElement as HTMLElement).offsetTop;
+		const elementHeight = (highlightedElement as HTMLElement).offsetHeight;
 
-		if (rect.top - 20 < pickerRect.top) {
-			pickerContainer.scrollTop -= pickerRect.top - rect.top + 20;
-		} else if (rect.bottom + 20 > pickerRect.bottom) {
-			pickerContainer.scrollTop += rect.bottom - pickerRect.bottom + 20;
+		const offset = 8; // px, adjust as needed
+
+		if (elementOffsetTop < containerTop + offset) {
+			pickerContainer.scrollTop = Math.max(elementOffsetTop - offset, 0);
+		} else if (elementOffsetTop + elementHeight > containerTop + containerHeight - offset) {
+			pickerContainer.scrollTop = elementOffsetTop + elementHeight - containerHeight + offset;
 		}
 	};
 

src/lib/InputGroup.svelte

@@ -9,4 +9,6 @@
 	let { class: classList, children }: Props = $props();
 </script>
 
-<div class={['mt-4 flex min-w-80 items-end gap-2', classList]}>{@render children?.()}</div>
+<div class={['mt-4 flex min-w-80 items-center justify-start gap-2', classList]}>
+	{@render children?.()}
+</div>

src/lib/Label.svelte

@@ -19,7 +19,7 @@
 		'transition-fontColor block',
 		error && !bigError
 			? 'mt-1 text-sm font-normal text-red-500'
-			: 'text-sui-text dark:text-sui-background mb-2 text-base font-medium',
+			: 'text-sui-text dark:text-sui-background mb-1 text-base font-medium',
 		bigError && 'text-red-500!',
 		classValue
 	]}

src/lib/RadioGroup.svelte

@@ -29,11 +29,11 @@
 	const isVert = $derived(group.orientation === 'vertical');
 </script>
 
-<div class={['flex w-fit flex-col', classValue]} {...group.root}>
+<div class={[classValue]} {...group.root}>
 	{#if label}
 		<Label {...group.label}>{label}</Label>
 	{/if}
-	<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row gap-3'}">
+	<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row justify-center gap-3'}">
 		{#each options as opt}
 			{@const item = group.getItem(getValue(opt))}
 			<div
@@ -74,7 +74,9 @@
 		onvalidate={(e) => (valid = e.detail.valid)}
 	/>
 
-	<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-		<Label for={group.label.for} error>{invalidMessage}</Label>
-	</div>
+	{#if required}
+		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+			<Label for={group.label.for} error>{invalidMessage}</Label>
+		</div>
+	{/if}
 </div>