frontend: added mobile design for TimeTable

- adjust text size on larger screens for StationSearch
- reduced gap on x axis in TimePicker
- removed text size in TimePicker, TimeTable on smaller screens
- added gap in TimeTable
- fixed auto align

Author: schmolldechse

frontend/src/components/StationSearch.svelte

@@ -105,7 +105,7 @@
 
 <div class="relative w-full">
 	<div
-		class="flex flex-row items-center gap-x-2 rounded-2xl bg-primary px-2 focus-within:ring-2 focus-within:ring-accent hover:ring-2 hover:ring-accent"
+		class="flex flex-row items-center gap-x-2 rounded-2xl bg-primary px-2 focus-within:ring-2 focus-within:ring-accent hover:ring-2 hover:ring-accent md:text-2xl"
 	>
 		<Search height="50px" width="50px" />
 		<input

frontend/src/components/timetable/TimePicker.svelte

@@ -74,7 +74,7 @@
 		type="button"
 		class:ring-2={isOpen}
 		class:ring-accent={isOpen}
-		class="flex flex-row items-center gap-x-4 rounded-md p-0.5 md:p-2 text-center text-base md:text-2xl hover:ring-2 hover:ring-accent"
+		class="flex flex-row items-center gap-x-2 rounded-md p-0.5 md:p-2 text-center md:text-2xl hover:ring-2 hover:ring-accent"
 		onclick={() => isOpen = true}
 	>
 		<Calendar />

frontend/src/components/timetable/TimeTable.svelte

@@ -18,7 +18,7 @@
 	};
 </script>
 
-<div class="flex flex-col md:w-[40%]">
+<div class="flex flex-col md:w-[40%] gap-y-2">
 	<div class="flex flex-row items-center justify-end gap-x-2">
 		<button
 			type="button"
@@ -49,25 +49,27 @@
 
 	<StationSearch onStationSelect={(station) => (stationSelected = station)} />
 
-    <div class="flex flex-row justify-between">
+	<div class="flex flex-row">
 		<TimePicker bind:selectedDate={dateSelected} />
 
-        <div class="flex flex-row">
-            <button class="flex flex-row items-center bg-primary rounded-3xl px-2"
-			onclick={() => (dateSelected = DateTime.now().set({ second: 0, millisecond: 0 }))}>
-                <Clock height="25px" width="25px" />
-                <span class="hidden md:block text-xl">Now</span>
-            </button>
+		<div class="ml-auto flex gap-1 md:gap-3">
+		<!-- Reset time -->
+		<button class="flex flex-row items-center bg-primary rounded-3xl px-2 md:px-4"
+				onclick={() => (dateSelected = DateTime.now().set({ second: 0, millisecond: 0 }))}>
+			<Clock height="25px" width="25px" />
+			<span class="hidden md:block text-xl">Now</span>
+		</button>
 
-            <button
-                    class="{stationSelected && dateSelected
+		<!-- Query departures/ arrivals of a station -->
+		<button
+			class="{stationSelected && dateSelected
 			? 'bg-accent text-black'
-			: 'bg-primary text-text'} flex items-center justify-center rounded-3xl px-4 text-base font-bold text-background md:text-2xl"
-                    onclick={gotoRequest}
-            >
-                Search
-            </button>
-        </div>
-    </div>
+			: 'bg-primary text-text'} flex items-center justify-center rounded-3xl px-4 text-background md:text-2xl font-bold"
+			onclick={gotoRequest}
+		>
+			Search
+		</button>
+		</div>
+	</div>
 
 </div>