Adapt map layout

frontend/src/lib/components/Tabs.svelte

@@ -10,37 +10,18 @@
 	let ref: HTMLDivElement;
 	let component = InfoTab;
 
-	const activeClicked = (evt) => {
-		const clickedTab = evt.target.closest('button');
-
-		for (const active of clickedTab.parentElement.querySelectorAll('.active')) {
-			active.classList.remove('active');
-		}
-
-		clickedTab.classList.add('active');
-
-		switch (clickedTab.getAttribute('id')) {
-			case 'info':
-				component = InfoTab;
-				break;
-			case 'desc':
-				component = DescTab;
-				break;
-			case 'map':
-				component = MapTab;
-				break;
-		}
-
+	const dispatchClick = (c: InfoTab | DescTab | MapTab) => {
+		component = c;
 		dispatch('tab-click', { component });
 	};
 </script>
 
-<div id="container">
-	<div id="tabs" on:click={activeClicked}>
-		<button id="info" class="active">Info</button>
-		<button id="desc">Descrizione</button>
-		<button id="map">Mappa</button>
+<div id="tabs">
+	<button class:active={component === InfoTab} on:click={() => dispatchClick(InfoTab)} id="info">Info</button>
+	<button class:active={component === DescTab} on:click={() => dispatchClick(DescTab)} id="desc">Descrizione</button>
+	<button class:active={component === MapTab}  on:click={() => dispatchClick(MapTab)}  id="map">Mappa</button>
 </div>
+<div id="container">
 	<div class="tab" bind:this={ref} role="tab">
 		<svelte:component this={component} route={route} />
 	</div>
@@ -49,7 +30,7 @@
 <style>
 	#container {
 		background-color: white;
-		height: 80%;
+		height: 100%;
 	}
 	#tabs {
 		display: flex;

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

@@ -31,11 +31,13 @@
 		margin-top: 0px;
 		margin-top: 0;
 		align-self: end;
+		display: grid;
 	}
 
 	.move-to-top {
 		align-self: start !important;
-		height: 100%;
+		height: calc(90dvh - 80px);
+		grid-template-rows: auto auto 1fr;
 	}
 
 	img {