fix overflow bug

website/src/lib/components/ElevationProfile.svelte

@@ -544,8 +544,8 @@
 </script>
 
 <div class="h-full grow min-w-0 flex flex-row gap-4 items-center {$$props.class ?? ''}">
-	<div class="grow h-full min-w-0">
-		<canvas bind:this={overlay} class="absolute pointer-events-none"></canvas>
+	<div class="grow h-full min-w-0 relative">
+		<canvas bind:this={overlay} class=" w-full h-full absolute pointer-events-none"></canvas>
 		<canvas bind:this={canvas} class="w-full h-full"></canvas>
 	</div>
 	<div class="h-full flex flex-col justify-center" style="width: {panelSize > 158 ? 22 : 42}px">

website/src/routes/[...language]/about/+page.svelte

@@ -57,7 +57,7 @@
 	{/each}
 </svelte:head>
 
-<div class="flex flex-col gap-y-24 my-24">
+<div class="space-y-24 my-24">
 	<div class="px-12 w-full flex flex-col items-center">
 		<div class="flex flex-col gap-6 items-center max-w-3xl">
 			<div class="text-6xl font-black text-center">{$_('metadata.app_title')}</div>
@@ -147,23 +147,23 @@
 			</div>
 		</div>
 	</div>
-	<div class="p-6 md:p-12">
+	<div class="px-6 md:px-12">
 		<div class="text-center mb-6 [&>*>p]:text-muted-foreground">
 			<DocsLoader path="about/plot.md" />
 		</div>
+		<div class="h-48 w-full">
+			<ElevationProfile
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				additionalDatasets={$additionalDatasets}
+				elevationFill={$elevationFill}
+				panelSize={200}
+				distanceUnits={$distanceUnits}
+				velocityUnits={$velocityUnits}
+				temperatureUnits={$temperatureUnits}
+			/>
+		</div>
 		<div class="flex flex-col items-center">
-			<div class="h-48 w-full">
-				<ElevationProfile
-					{gpxStatistics}
-					{slicedGPXStatistics}
-					additionalDatasets={$additionalDatasets}
-					elevationFill={$elevationFill}
-					panelSize={200}
-					distanceUnits={$distanceUnits}
-					velocityUnits={$velocityUnits}
-					temperatureUnits={$temperatureUnits}
-				/>
-			</div>
 			<div class="h-10 w-fit">
 				<GPXStatistics
 					{gpxStatistics}

website/tailwind.config.js

@@ -52,7 +52,7 @@ const config = {
                 sans: [...fontFamily.sans]
             },
             screens: {
-                "xs": "500px",
+                "xs": "540px",
             }
         }
     },