Merge pull request #2815 from evidence-dev/fix/2797

Fix/2797

.changeset/plenty-pugs-visit.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Align the height of buttongroup to dropdown

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte

@@ -106,7 +106,7 @@
 			<div
 				class={display === 'tabs'
 					? 'my-6 flex flex-wrap gap-x-1 gap-y-1'
-					: 'inline-flex rounded-md shadow-sm overflow-auto border no-scrollbar'}
+					: 'inline-flex rounded-md shadow-sm overflow-auto h-8 border no-scrollbar'}
 				role="group"
 			>
 				{#if preset}

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte

@@ -42,11 +42,12 @@
 {:else if display === 'buttons'}
 	<button
 		type="button"
-		class=" flex-none py-1 font-medium h-8 px-3 text-xs truncate
+		class=" flex-none py-1 font-medium px-3 text-xs truncate
 		border-r last:border-none
 		hover:bg-gray-100 focus:z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400
+		transition-colors duration-200
 		{$currentValue?.value === value
-			? 'z-10 border-gray-200 bg-gray-100 text-blue-700'
+			? 'z-10 border-gray-200 bg-gray-50 text-blue-600'
 			: 'z-0 bg-white text-gray-900 border-gray-200'}
                                 "
 		on:click={() => update({ valueLabel, value })}