Support multiline descriptions for entities

Use a textarea for editing the description and preserve linebreaks
when it's displayed in the UI using a new preWrap class for this
purpose.

components/CardEvent.vue

@@ -8,7 +8,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="event.interested">
 			{{ event.interested }} interested
 		</p>

components/CardShift.vue

@@ -5,7 +5,7 @@
 <template>
 	<section class="shift">
 		<h3>{{ shift.name }}</h3>
-		<p>{{ shift.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ shift.description ?? "No description provided" }}</p>
 
 		<h4>Timeslots</h4>
 		<ul>

components/TableScheduleEvents.vue

@@ -39,11 +39,11 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								:disabled="!canEdit(event)"
 								v-model="event.description"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -82,10 +82,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newEventDescription"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -116,7 +116,7 @@
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.host }}</td>
-						<td>{{ event.description }}</td>
+						<td class="preWrap">{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 					</tr>

components/TableScheduleLocations.vue

@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="location.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -49,7 +49,7 @@
 					<template v-else>
 						<td>{{ location.id }}</td>
 						<td>{{ location.name }}</td>
-						<td>{{ location.description }}</td>
+						<td class="preWrap">{{ location.description }}</td>
 					</template>
 				</tr>
 				<tr v-if='edit'>
@@ -63,10 +63,10 @@
 							>
 					</td>
 					<td>
-						<input
-							type="text"
+						<textarea
+							rows="1"
 							v-model="newLocationDescription"
-						>
+						/>
 					</td>
 					<td colspan="1">
 						<button

components/TableScheduleRoles.vue

@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="role.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -55,10 +55,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newRoleDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -80,7 +80,7 @@
 					>
 						<td>{{ role.id }}</td>
 						<td>{{ role.name }}</td>
-						<td>{{ role.description }}</td>
+						<td class="preWrap">{{ role.description }}</td>
 					</tr>
 				</template>
 			</tbody>

components/TableScheduleShifts.vue

@@ -37,10 +37,10 @@
 						</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="shift.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -71,10 +71,10 @@
 						</td>
 						<td></td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newShiftDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -98,7 +98,7 @@
 						<td>{{ shift.name }}</td>
 						<td>{{ shift.roleId }}</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
-						<td>{{ shift.description }}</td>
+						<td class="preWrap">{{ shift.description }}</td>
 					</tr>
 				</template>
 			</tbody>