Remove animation in favor of bottom-alignment

frontend/src/lib/components/Route.svelte

@@ -22,13 +22,12 @@
 		box-shadow: 0 0 50px #ccc;
 		border-radius: 30px;
 		width: calc((100% - 50px) / 2);
-		height: calc(100vh/3 - 10vh );
 		font-size: 18px;
 	}
 
 	#image {
 		width: 100%;
-		height: 150px;
+		height: 140px;
 		object-position: center;
 		background-position: center;
 		object-fit: cover;

frontend/src/lib/components/Tabs.svelte

@@ -2,10 +2,18 @@
 	import InfoTab from './tabs/InfoTab.svelte';
 	import DescTab from './tabs/DescTab.svelte';
 	import MapTab from './tabs/MapTab.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+
 	const dispatch = createEventDispatcher();
 
+	let ref;
 	let component = InfoTab;
+	onMount(() => {
+		const gbcr = ref.getBoundingClientRect();
+		console.log(gbcr);
+		ref.style.height = `${gbcr.height}px`;
+	});
+
 	const activeClicked = (evt) => {
 		const clickedTab = evt.target.closest('button');
 
@@ -24,6 +32,7 @@
 				break;
 			case 'map':
 				component = MapTab;
+				requestAnimationFrame()
 				break;
 		}
 
@@ -39,7 +48,7 @@
 		<button id="desc">Descrizione</button>
 		<button id="map">Mappa</button>
 	</div>
-	<div class="tab">
+	<div class="tab" bind:this={ref}>
 		<svelte:component this={component} />
 	</div>
 </div>
@@ -47,7 +56,6 @@
 <style>
 	#container {
 		background-color: white;
-		height: calc(20vh);
 	}
 	#tabs {
 		display: flex;

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

@@ -1,3 +1,7 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
 <div>
 	The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
 	adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@@ -11,4 +15,4 @@
 	div {
 		padding: 10px;
 	}
-</style>
+</style>

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

@@ -1,6 +1,3 @@
-<script>
-</script>
-
 <div id="grid">
 	<div>
 		<p>Distanza</p>

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

@@ -87,7 +87,7 @@
 <style>
 	@import 'leaflet/dist/leaflet.css';
 	#map {
-		height: calc(45vh + 60px);
+		height: 100%;
 		z-index: 0;
 	}
 </style>

frontend/src/routes/+layout.svelte

@@ -41,6 +41,9 @@
 <style>
 	main {
 		height: calc(100% - 10vh - 10px);
+		overflow-y: scroll;
+		width: 100%;
+		display: grid;
 	}
 
 	div {

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

@@ -20,7 +20,6 @@
 		gap: 15px;
 		padding-top: 10px;
 		margin-top: 70px;
-		height: calc(100% - 70px - 10vh);
 		overflow-y: scroll;
 	}
 </style>

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

@@ -8,9 +8,9 @@
 
     const mapClick = (evt) => {
         if(evt.detail.component === MapTab)
-            divider.style.transform = "translateY(calc(0vh + 70px))";
+            requestAnimationFrame(() => divider.style.transform = "translateY(-10vh)");
         else
-            divider.style.transform = "translateY(30vh)";
+            requestAnimationFrame(() => divider.style.transform = "translateY(calc(0vh - 70px))");
     }
 </script>
 
@@ -32,13 +32,13 @@
         background: white;
         margin-top: 0px;
         margin-top: 0;
-        transform: translateY(30vh);
         transition: transform 400ms;
+        align-self: end;
     }
 
     img {
         width: 100%;
-        height: calc(100% - 10vh);
+        height: calc(100% - 10vh - 10px);
         position: absolute;
         z-index: -1;
     }