autocomplete popup is not align with input about skeleton HOT 2 CLOSED

<script lang="ts">
	import {
		InputChip,
		Autocomplete,
		popup,
		type PopupSettings,
		type AutocompleteOption,
	} from '@skeletonlabs/skeleton';
	import type { SizeOptions } from '@floating-ui/dom';

	import { uniqueId } from 'lodash';

	let inputChip = '';
	let inputChipList = ['vanilla', 'chocolate'];
	type FlavorOption = AutocompleteOption<string, { healthy: boolean }>;
	const flavorOptions: FlavorOption[] = [
		{ label: 'Vanilla', value: 'vanilla', keywords: 'plain, basic', meta: { healthy: false } },
		{ label: 'Chocolate', value: 'chocolate', keywords: 'dark, white', meta: { healthy: false } },
		{ label: 'Strawberry', value: 'strawberry', keywords: 'fruit', meta: { healthy: true } },
		{
			label: 'Neapolitan',
			value: 'neapolitan',
			keywords: 'mix, strawberry, chocolate, vanilla',
			meta: { healthy: false },
		},
		{ label: 'Pineapple', value: 'pineapple', keywords: 'fruit', meta: { healthy: true } },
		{ label: 'Peach', value: 'peach', keywords: 'fruit', meta: { healthy: true } },
	];

	function onInputChipSelect(event: CustomEvent<FlavorOption>): void {
		console.log('onInputChipSelect', event.detail);
		if (inputChipList.includes(event.detail.value) === false) {
			inputChipList = [...inputChipList, event.detail.value];
			inputChip = '';
		}
	}

	const uuid = uniqueId('multiple-select-popup');

	let popupSettings: PopupSettings = {
		event: 'focus-click',
		target: uuid,
		placement: 'bottom-start',
		middleware: {
			shift: {
				padding: 0,
			},
			offset: 0,
			size: {
				apply({ rects, elements }) {
					Object.assign(elements.floating.style, {
						width: `${rects.reference.width}px`,
					});
				},
			} as SizeOptions,
		},
	};
</script>

<div use:popup={popupSettings} class="w-full">
	<InputChip bind:input={inputChip} bind:value={inputChipList} name="chips" />
	<div data-popup={popupSettings.target} class={`card max-h-48  overflow-y-auto`} tabindex="-1">
		<Autocomplete
			bind:input={inputChip}
			options={flavorOptions}
			denylist={inputChipList}
			on:selection={onInputChipSelect} />
	</div>
</div>