Add re size when clicking on map

frontend/src/lib/components/Tabs.svelte

@@ -49,6 +49,7 @@
 <style>
 	#container {
 		background-color: white;
+		height: 80%;
 	}
 	#tabs {
 		display: flex;
@@ -76,6 +77,7 @@
 		padding: 10px;
 		background-color: white;
 		overflow-y: scroll;
+		height: 100%;
 	}
 
 	.active {

frontend/src/lib/components/tabs/MapTab.svelte

@@ -72,7 +72,10 @@
 	onMount(async () => {
 		await watchPosition();
 		leaflet = await import('leaflet');
-		renderMap()
+
+		setTimeout(() => {
+			renderMap()
+		}, 500);
 	});
 
 	onDestroy(async () => {

frontend/src/routes/routes/[slug]/+page.svelte

@@ -7,17 +7,17 @@
 
 	let divider;
 
-    const tabClick = (event) => {
-		if (event.detail.component === MapTab) {
+	let isMap = false;
 
-		}
+    const tabClick = (event) => {
+		isMap = event.detail.component === MapTab;
 	};
 </script>
 
 <Header></Header>
 <img src="/images/splash-background.webp" alt="splash" />
 
-<div bind:this={divider} id="divider">
+<div bind:this={divider} id="divider" class:move-to-top={isMap}>
 	<div id="banner">
 		<p class='path-name'>Percorso <b>{data.name_it}</b></p>
 		<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
@@ -30,10 +30,14 @@
 		background: white;
 		margin-top: 0px;
 		margin-top: 0;
-		transition: transform 400ms;
 		align-self: end;
 	}
 
+	.move-to-top {
+		align-self: start !important;
+		height: 100%;
+	}
+
 	img {
 		width: 100%;
 		height: calc(100% - 10vh - 10px);