Render multi-line diff entries

Rework the rendering of the DiffEntry component to properly show
multiline entries as spanning multiple lines.

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>

components/DiffEntry.vue

@@ -15,9 +15,14 @@
 			:key="index"
 			:class="type"
 		>
+			<div class="symbol">
+				{{ { "removed": "- ", "added": "+ "}[type] }}
+			</div>
+			<div class="content">
 				{{ text }}
 			</div>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -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>