Improve route list layout for mobile usability

Fixes #228

Optimize the route list view for small screens in `ViewAllRoutesModal.svelte`.

* Implement CSS Flexbox/Grid for better responsiveness.
* Introduce a collapsible list option for routes with many entries.
* Add media queries to optimize touch-friendly interactions.
* Ensure proper padding/margins to improve readability.

Author: Chanchal-D

src/app.css

@@ -73,4 +73,30 @@
 		left: auto;
 		right: 1.25rem;
 	}
+
+	.collapsible-list {
+		@apply flex flex-col;
+	}
+
+	.collapsible-list__item {
+		@apply mb-2 p-2 border border-gray-300 rounded-md;
+	}
+
+	@media (max-width: 768px) {
+		.collapsible-list__item {
+			@apply mb-1 p-1;
+		}
+	}
+
+	@media (hover: hover) {
+		.collapsible-list__item:hover {
+			@apply bg-gray-100;
+		}
+	}
+
+	@media (pointer: coarse) {
+		.collapsible-list__item {
+			@apply p-3;
+		}
+	}
 }

src/components/routes/ViewAllRoutesModal.svelte

@@ -66,8 +66,8 @@
 	{/if}
 
 	{#if routes.length > 0}
-		<div>
-			<div class="sticky top-0">
+		<div class="flex flex-col h-full">
+			<div class="sticky top-0 p-2 bg-white dark:bg-black">
 				<input
 					type="text"
 					placeholder={$t('search.search_for_routes')}
@@ -92,7 +92,7 @@
 				</svg>
 			</div>
 
-			<div>
+			<div class="flex-1 overflow-y-auto p-2">
 				{#if filteredRoutes.length > 0}
 					{#each filteredRoutes as route}
 						<RouteItem {route} {handleModalRouteClick} />