<!-- @component
ScrollBox provides a small convenience wrapper for creating a scrollable container.
This component expects to be used as a direct child of a flex container that typically
has a constrained height. It applies the necessary CSS styles to ensure that its content
can scroll properly and that the container expands to the maximum available space within
the parent flexbox. Typically, a parent might have these Tailwind classes applied:
`flex h-full`

More complex layouts that should not expand to fill all available space should use
a custom container with `overflow-auto` and an intentionally constrained height.
-->

<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	interface Props {
		/** Applies ui-layout-px padding to the scrollable content area (default: false) */
		padded?: boolean;
		class?: ClassValue;
		children?: import('svelte').Snippet;
	}

	let { padded = false, class: classValue, children }: Props = $props();
</script>

<div class={['min-h-0 min-w-0 flex-1 overflow-auto', padded && 'p-layout', classValue]}>
	{@render children?.()}
</div>
