From 6d9d937c70204db8012a5451cec4ad48457f5927 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 16:50:41 +0200
Subject: [PATCH] Render multi-line diff entries

Rework the rendering of the DiffEntry component to properly show
multiline entries as spanning multiple lines.
---
 components/CardEventSlot.vue |  2 +-
 components/DiffEntry.vue     | 27 ++++++++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue
index 7a15a5e..baa2e3a 100644
--- a/components/CardEventSlot.vue
+++ b/components/CardEventSlot.vue
@@ -13,7 +13,7 @@
 		<p v-if=event?.host>
 			Host: {{ event.host }}
 		</p>
-		<p>{{ event?.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ event?.description ?? "No description provided" }}</p>
 		<p v-if="locations.length">
 			At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
 		</p>
diff --git a/components/DiffEntry.vue b/components/DiffEntry.vue
index 70c2fb0..142f12f 100644
--- a/components/DiffEntry.vue
+++ b/components/DiffEntry.vue
@@ -15,7 +15,12 @@
 			:key="index"
 			:class="type"
 		>
-			{{ text }}
+			<div class="symbol">
+				{{ { "removed": "- ", "added": "+ "}[type] }}
+			</div>
+			<div class="content">
+				{{ text }}
+			</div>
 		</div>
 	</div>
 </template>
@@ -33,20 +38,20 @@ defineProps<{
 	grid-template-columns: 5rem 1fr;
 	column-gap: 1rem;
 }
-.removed {
+:is(.removed, .added) {
+	display: flex;
 	grid-column: 2 / 2;
+	white-space: pre-wrap;
+}
+:is(.removed, .added) .symbol {
+	display: block;
+	font-family: monospace;
+	flex: 0 0 auto;
+}
+.removed {
 	color: color-mix(in srgb, CanvasText, red 40%);
 }
-.removed::before {
-	content: "- ";
-	font-family: monospace;
-}
 .added {
-	grid-column: 2 / 2;
 	color: color-mix(in srgb, CanvasText, green 40%);
 }
-.added::before {
-	content: "+ ";
-	font-family: monospace;
-}
 </style>