diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
index 82bbacf..27a9677 100644
--- a/src/components/navigation/ModalPane.svelte
+++ b/src/components/navigation/ModalPane.svelte
@@ -40,6 +40,10 @@
 		<div class="relative flex-1">
 			<div class="absolute inset-0 overflow-y-auto">
 				<slot></slot>
+				<div class="mb-4">
+					<!-- this empty footer shows a user that the content in the pane hasn't been cut off. -->
+					&nbsp;
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
index 267c139..7703c69 100644
--- a/src/components/oba/TripDetailsPane.svelte
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -108,11 +108,13 @@
 								/>
 							{/if}
 						</div>
-						<div class="ml-4 flex w-full items-center justify-between">
-							<div class="text-md font-semibold text-[#000000] dark:text-white">
+						<div class="ml-4 flex w-full items-center justify-between space-x-1">
+							<div class="text-md font-semibold dark:text-white">
 								{stopInfo[tripStop.stopId] ? stopInfo[tripStop.stopId].name : tripStop.stopId}
 							</div>
-							<div class="text-sm text-[#86858B]">{convertUnixToTime(tripStop.arrivalTime)}</div>
+							<div class="whitespace-nowrap text-sm text-gray-500">
+								{convertUnixToTime(tripStop.arrivalTime)}
+							</div>
 						</div>
 					</div>
 				{/each}