From a18220724e12908b5fa589725d9030c167515e24 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 21 Jan 2025 19:45:41 +0530
Subject: [PATCH 1/5] ui: add padding in StandalonePage to make responsive

---
 src/components/StandalonePage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StandalonePage.svelte b/src/components/StandalonePage.svelte
index f523fbe..b8a72b4 100644
--- a/src/components/StandalonePage.svelte
+++ b/src/components/StandalonePage.svelte
@@ -8,6 +8,6 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-auto h-full max-w-5xl overflow-y-auto">
+<div class="mx-auto h-full max-w-5xl overflow-y-auto p-4">
 	{@render children?.()}
 </div>

From 93c4ed9b86a816f383feb07776a3885df05350bf Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 21 Jan 2025 19:57:59 +0530
Subject: [PATCH 2/5] Remove unnecessary ternary operation for cleaner code in
 schedule table rendering

---
 .../schedule-for-stop/RouteScheduleTable.svelte        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/schedule-for-stop/RouteScheduleTable.svelte b/src/components/schedule-for-stop/RouteScheduleTable.svelte
index fa1a20a..ac6073f 100644
--- a/src/components/schedule-for-stop/RouteScheduleTable.svelte
+++ b/src/components/schedule-for-stop/RouteScheduleTable.svelte
@@ -63,11 +63,12 @@
 						>
 							{formatHour(hour)} <span class="text-sm text-gray-600 dark:text-gray-100">AM</span>
 						</td>
-						<td class="border px-6 py-3 text-lg dark:border-gray-700 dark:text-white">
+						<td
+							class="flex items-start gap-3 border px-6 py-3 text-lg underline dark:border-gray-700 dark:text-white"
+						>
 							{#each times as stopTime, index (index)}
 								<span>
 									{extractMinutes(stopTime.arrivalTime)}
-									{index < times.length - 1 ? ', ' : ''}
 								</span>
 							{/each}
 						</td>
@@ -96,11 +97,12 @@
 						>
 							{formatHour(hour)} <span class="text-sm text-gray-600 dark:text-gray-100">PM</span>
 						</td>
-						<td class="border px-6 py-3 text-lg dark:border-gray-700 dark:text-white">
+						<td
+							class="flex items-start gap-3 border px-6 py-3 text-lg underline dark:border-gray-700 dark:text-white"
+						>
 							{#each times as stopTime, index (index)}
 								<span>
 									{extractMinutes(stopTime.arrivalTime)}
-									{index < times.length - 1 ? ', ' : ''}
 								</span>
 							{/each}
 						</td>

From 434470a73d93ae3f788e3e135d3e8c38fbc99ed6 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 21 Jan 2025 20:03:21 +0530
Subject: [PATCH 3/5] Refactor UI: Combine 'Collapse All' and 'Show All'
 buttons into a single toggle button for improved usability

---
 .../stops/[stopID]/schedule/+page.svelte      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte
index 627f2b2..fa4e913 100644
--- a/src/routes/stops/[stopID]/schedule/+page.svelte
+++ b/src/routes/stops/[stopID]/schedule/+page.svelte
@@ -21,6 +21,7 @@
 	let stopDirection = $state('');
 	let loading = $state(true);
 	let accordionComponent = $state();
+	let allRoutesExpanded = $state(false);
 
 	let schedulesMap = new Map();
 	let routeReference = new Map();
@@ -105,6 +106,15 @@
 		return grouped;
 	}
 
+	function toggleAllRoutes() {
+		if (allRoutesExpanded) {
+			accordionComponent.closeAll();
+		} else {
+			accordionComponent.openAll();
+		}
+		allRoutesExpanded = !allRoutesExpanded;
+	}
+
 	onMount(async () => {
 		const formattedDate = currentDate.toISOString().split('T')[0];
 		await fetchScheduleForStop(stopId, formattedDate);
@@ -148,11 +158,10 @@
 					</div>
 
 					<div class="flex-1 text-right">
-						<button class="button" onclick={() => accordionComponent.openAll()}>
-							{$t('schedule_for_stop.show_all_routes')}
-						</button>
-						<button class="button" onclick={() => accordionComponent.closeAll()}>
-							{$t('schedule_for_stop.collapse_all_routes')}
+						<button class="button" onclick={toggleAllRoutes}>
+							{allRoutesExpanded
+								? $t('schedule_for_stop.collapse_all_routes')
+								: $t('schedule_for_stop.show_all_routes')}
 						</button>
 					</div>
 				</div>

From 469ee9a0ad31b94967ca298367cefa09807aefe6 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 21 Jan 2025 20:17:20 +0530
Subject: [PATCH 4/5] added padding in accordion item for better UI

---
 src/components/containers/AccordionItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte
index ce0466a..9b3d45f 100644
--- a/src/components/containers/AccordionItem.svelte
+++ b/src/components/containers/AccordionItem.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <div class="relative">
-	<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
+	<div class="sticky top-0 z-10 bg-white px-4 dark:bg-gray-800">
 		<button
 			type="button"
 			class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"

From 038dc1a01b88af48991d610f5c82cffb0f8a0341 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 21 Jan 2025 20:18:56 +0530
Subject: [PATCH 5/5] fix: resolve z-index issue between accordion and
 datepicker, reduced padding in schedules table

---
 src/routes/stops/[stopID]/schedule/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte
index fa4e913..f5c684c 100644
--- a/src/routes/stops/[stopID]/schedule/+page.svelte
+++ b/src/routes/stops/[stopID]/schedule/+page.svelte
@@ -153,7 +153,7 @@
 				</h2>
 
 				<div class="mb-4 flex gap-4">
-					<div class="min-w-32">
+					<div class="z-20 w-[30%] min-w-32">
 						<Datepicker bind:value={selectedDate} inputClass="w-96" />
 					</div>
 
@@ -167,7 +167,7 @@
 				</div>
 
 				<div
-					class="flex-1 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-black"
+					class="flex-1 rounded-lg border border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-black"
 				>
 					{#if emptySchedules}
 						<p class="text-center text-gray-700 dark:text-gray-400">