From 808358a210b83331cb8c0c7b39e1028538b91208 Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Fri, 18 Oct 2024 08:50:37 +0200
Subject: [PATCH] Horizontal margins for Collapsibles

---
 src/lib/components/Collapsible.svelte | 29 ++++++++++++++++-----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte
index b536f20..78e1466 100644
--- a/src/lib/components/Collapsible.svelte
+++ b/src/lib/components/Collapsible.svelte
@@ -1,22 +1,27 @@
 <script>
 	import AttributionInformation from '$lib/components/AttributionInformation.svelte';
-	export let title
-	export let paragraphs
-	export let id
+	export let title;
+	export let paragraphs;
+	export let id;
 </script>
 
-<input id={id} class="toggle" type="checkbox" />
-<label for={id} class="lbl-toggle top">{title}</label>
-<div class="collapsible-content">
-	{#each paragraphs as par}
-		<p class="mb-4">{@html par}</p>
-	{/each}
-	{#if id == "taxonomy"}
-		<AttributionInformation />
-	{/if}
+<div class="collapsible-container">
+	<input {id} class="toggle" type="checkbox" />
+	<label for={id} class="lbl-toggle top">{title}</label>
+	<div class="collapsible-content">
+		{#each paragraphs as par}
+			<p class="mb-4">{@html par}</p>
+		{/each}
+		{#if id == 'taxonomy'}
+			<AttributionInformation />
+		{/if}
+	</div>
 </div>
 
 <style>
+	.collapsible-container {
+		margin: 0 2rem;
+	}
 	input.toggle[type='checkbox'] {
 		display: none;
 	}