Further styling to staff view grid

src/lib/components/ui/station-board/StaffServicesGrid.svelte

@@ -81,7 +81,7 @@
 						>
 							{#if isRightTime(service.sta, service.ata || service.eta)}
 								RT
-							{:else if service.sta && service.c} CAN {:else}
+							{:else if service.sta && service.c} CANC {:else}
 								{realArrival}
 							{/if}
 						</div>
@@ -116,15 +116,19 @@
 	.departure-board {
 		width: 100%;
 		max-width: 100%;
-		margin: 5px auto;
+		height: 100%;
+		max-height: 100%;
+		margin: 0 auto;
 		box-sizing: border-box;
-		overflow: hidden;
+		overscroll-behavior-y: contain;
+		overflow-y: auto;
 	}
 
 	.header.container {
 		position: sticky;
+		padding-top: 7px;
 		top: 0;
-		z-index: 2;
+		z-index: 10;
 		background: var(--color-bg-dark);
 	}
 
@@ -172,23 +176,29 @@
 		padding-bottom: 7px;
 	}
 
-	.cell > div {
-		display: block;
-		width: 100%;
-	}
-
-	/* Row Logic */
-	.service.cancelled {
+	/* Cancellation Logic */
+	.service.cancelled,
+	.service.cancelled .cell.orig,
+	.service.cancelled .cell.dest {
 		color: rgb(255, 131, 131);
 	}
+	.service.cancelled .cell.plt,
+	.service.cancelled .cell.act {
+		text-decoration: line-through;
+		opacity: 0.25;
+	}
+	.service.cancelled .cell.sch {
+		text-decoration: line-through;
+	}
 
-	/* Special Row Styles */
+	/* Meta Row Styles */
 	.operator.row,
 	.delay-reason.row,
 	.cancel-reason.row {
 		grid-template-columns: 1fr;
 		text-align: left;
 		font-size: 0.88rem;
+		font-stretch: 80%;
 	}
 
 	.cancel-reason.row {
@@ -232,7 +242,7 @@
 	}
 
 	.operator.row {
-		/* font-family: 'URW Gothic', sans-serif; */
+		font-stretch: 110%;
 		padding: 0;
 		color: rgb(187, 187, 255);
 	}
@@ -320,16 +330,9 @@
 		text-align: center;
 		font-stretch: 100%;
 	}
-	/* Colour orig and dest values when cancelled */
-	.service-row.serviceCancelled .orig-cell,
-	.service-row.serviceCancelled .dest-cell {
-		color: rgb(255, 131, 131);
-	}
-
 	.cell.pass {
 		grid-column: span 2;
 	}
-
 	.cell.sch,
 	.cell.act {
 		text-align: center;