From d836bb6f5c4233330227a491fe290dc053f261fd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Mon, 24 Feb 2025 19:33:10 +0100
Subject: [PATCH] fix: improve app markdown rendering

---
 .../components/display/AppMarkdown.svelte     | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
index 00a8c89b41..21177dd387 100644
--- a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
@@ -73,7 +73,7 @@
 			'h-full w-full overflow-y-auto prose max-w-full',
 			resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
 			css?.container?.class,
-			' dark:prose-invert',
+			'dark:prose-invert',
 			'wm-markdown'
 		)}
 		style={css?.container?.style}
@@ -86,14 +86,42 @@
 			{id}
 			bind:initializing
 			bind:result
-		>
-			{#if result}
-				{#key result}
-					<Markdown md={result} plugins={[gfmPlugin()]} />
-				{/key}
-			{/if}
+			>{#if result}{#key result}<Markdown md={result} plugins={[gfmPlugin()]} />{/key}{/if}
 		</RunnableWrapper>
 	</div>
 {:else}
 	<RunnableWrapper {outputs} render={false} autoRefresh {componentInput} {id} />
 {/if}
+
+<style global>
+	.wm-markdown p:first-child {
+		margin-top: 0;
+	}
+	.wm-markdown p:last-child {
+		margin-bottom: 0;
+	}
+	.wm-markdown h1:first-child {
+		margin-top: 0;
+	}
+	.wm-markdown h1:last-child {
+		margin-bottom: 0;
+	}
+	.wm-markdown h2:first-child {
+		margin-top: 0;
+	}
+	.wm-markdown h2:last-child {
+		margin-bottom: 0;
+	}
+	.wm-markdown h3:first-child {
+		margin-top: 0;
+	}
+	.wm-markdown h3:last-child {
+		margin-bottom: 0;
+	}
+	.wm-markdown h4:first-child {
+		margin-top: 0;
+	}
+	.wm-markdown h4:last-child {
+		margin-bottom: 0;
+	}
+</style>