From ac20b5a6e7b6ce53f4bcb8eba3716cd6479690e0 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 5 Jul 2024 22:13:33 +0200
Subject: [PATCH] fix overflow bug

---
 .../lib/components/ElevationProfile.svelte    |  4 +--
 .../routes/[...language]/about/+page.svelte   | 28 +++++++++----------
 website/tailwind.config.js                    |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index deb69812..afe82818 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/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">
diff --git a/website/src/routes/[...language]/about/+page.svelte b/website/src/routes/[...language]/about/+page.svelte
index 80c1e292..3041a440 100644
--- a/website/src/routes/[...language]/about/+page.svelte
+++ b/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}
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 6d15d673..7b0b836d 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -52,7 +52,7 @@ const config = {
                 sans: [...fontFamily.sans]
             },
             screens: {
-                "xs": "500px",
+                "xs": "540px",
             }
         }
     },