<script lang="ts">
	import type { Snippet } from "svelte";

	let { children }: { children: Snippet } = $props();

	// a path too long to fit scrolls to its end, where the current entry is. the
	// width settles only once fonts load and the header finishes wrapping
	const showEnd = (el: HTMLElement) => {
		const end = () => {
			el.scrollLeft = el.scrollWidth;
		};
		void document.fonts.ready.then(end);
		const observer = new ResizeObserver(end);
		observer.observe(el);
		return () => observer.disconnect();
	};
</script>

<div
	class="flex w-fit min-w-0 items-center gap-2xs overflow-x-auto rounded-md border border-background-canvas bg-background-canvas px-sm py-2xs whitespace-nowrap"
	{@attach showEnd}
>
	{@render children()}
</div>