Preserving whitespace for description display

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.html

@@ -6,7 +6,7 @@
 		🕑 {{ groupEvent?.startTime?.toFullDateTimeString() }}   ↔{{ groupEvent?.track?.distance | distance }} ↑{{ groupEvent?.track?.elevationUp | elevation:'up' }} ↓{{ groupEvent?.track?.elevationDown | elevation:'down' }}
 	</ng-template>
 	<ng-template pTemplate="content">
-		{{ groupEvent?.description }}
+		<div class="description-text">{{ groupEvent?.description }}</div>
 	</ng-template>
 	<ng-template pTemplate="footer">
 		<div class="button-group">

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.html

@@ -5,7 +5,7 @@
 	<dt>Title</dt>
 	<dd>{{ event?.title }}</dd>
 	<dt>Description</dt>
-	<dd>{{ event?.description }}</dd>
+	<dd><div class="description-text">{{ event?.description }}</div></dd>
 </dl>
 
 <h1>Registrations</h1>

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -6,7 +6,7 @@
 		↔{{ track?.distance | distance }} ↑{{ track?.elevationUp | elevation:'up' }} ↓{{ track?.elevationDown | elevation:'down' }}
 	</ng-template>
 	<ng-template pTemplate="content">
-		{{ track?.description }}
+		<div class="description-text">{{ track?.description }}</div>
 	</ng-template>
 	<ng-template pTemplate="footer">
 		<div class="button-group">

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.html

@@ -10,7 +10,7 @@
 	<dt>Title</dt>
 	<dd>{{ track?.displayName }}</dd>
 	<dt>Description</dt>
-	<dd>{{ track?.description }}</dd>
+	<dd><div class="description-text">{{ track?.description }}</div></dd>
 	<dt>Distance</dt>
 	<dd>{{ track?.distance | distance }}</dd>
 	<dt>Elevation up</dt>

src/RunnersMeet.Client/src/styles.scss

@@ -105,6 +105,10 @@ dl.pivot-table {
 	opacity: 0.8;
 }
 
+.description-text {
+	white-space: pre;
+}
+
 ///////////////////
 /// PrimeNG "fixes"