finalizing fixes & additions

src/lib/components/common/Collapsible.svelte

@@ -9,11 +9,18 @@
 	export let className = '';
 	export let title = null;
 
+	let contentHeight = 0;
+	let contentElement: HTMLElement;
+
 	function handleClick(event) {
 		if (!event.target.closest('.no-toggle')) {
 			open = !open;
 		}
 	}
+
+	$: if (contentElement) {
+		contentHeight = open ? contentElement.scrollHeight : 0;
+	}
 </script>
 
 <div class={className}>
@@ -43,9 +50,13 @@
 		</button>
 	{/if}
 
-	{#if open}
-		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+	<div
+		bind:this={contentElement}
+		class="overflow-hidden transition-all duration-300 ease-in-out"
+		style="max-height: {contentHeight}px;"
+	>
+		<div>
 			<slot name="content" />
 		</div>
-	{/if}
+	</div>
 </div>