small ui improvements around elevation profile

website/src/lib/components/ElevationProfile.svelte

@@ -79,7 +79,8 @@
 					callback: function (value: number) {
 						return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
 					},
-					align: 'inner'
+					align: 'inner',
+					maxRotation: 0
 				}
 			},
 			y: {
@@ -489,6 +490,8 @@
 
 		overlay.width = canvas.width / window.devicePixelRatio;
 		overlay.height = canvas.height / window.devicePixelRatio;
+		overlay.style.width = `${canvas.width}px`;
+		overlay.style.height = `${canvas.height}px`;
 
 		if ($slicedGPXStatistics) {
 			let startIndex = $slicedGPXStatistics[1];
@@ -512,7 +515,7 @@
 					startPixel,
 					chart.chartArea.top,
 					endPixel - startPixel,
-					chart.chartArea.bottom - chart.chartArea.top
+					chart.chartArea.height
 				);
 			}
 		} else if (overlay) {
@@ -532,9 +535,9 @@
 	});
 </script>
 
-<div class="h-full grow min-w-0 relative {$$props.class ?? ''}">
+<div class="h-full grow min-w-0 relative py-2">
 	<canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
-	<canvas bind:this={canvas} class="w-full h-full"></canvas>
+	<canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
 	{#if showControls}
 		<div class="absolute bottom-10 right-1.5">
 			<Popover.Root>
@@ -543,9 +546,9 @@
 						label={$_('chart.settings')}
 						builders={[builder]}
 						variant="outline"
-						class="p-1 h-7 opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
+						class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
 					>
-						<ChartNoAxesColumn size="16" />
+						<ChartNoAxesColumn size="18" />
 					</ButtonWithTooltip>
 				</Popover.Trigger>
 				<Popover.Content class="w-fit p-0 flex flex-col divide-y" side="left" sideOffset={-32}>

website/src/lib/components/GPXStatistics.svelte

@@ -28,7 +28,7 @@
 
 <Card.Root
 	class="h-full {orientation === 'vertical'
-		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
+		? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
 		: 'w-full'} border-none shadow-none"
 >
 	<Card.Content
@@ -38,15 +38,15 @@
 	>
 		<Tooltip label={$_('quantities.distance')}>
 			<span class="flex flex-row items-center">
-				<Ruler size="18" class="mr-1" />
+				<Ruler size="16" class="mr-1" />
 				<WithUnits value={statistics.global.distance.total} type="distance" />
 			</span>
 		</Tooltip>
 		<Tooltip label={$_('quantities.elevation_gain_loss')}>
 			<span class="flex flex-row items-center">
-				<MoveUpRight size="18" class="mr-1" />
+				<MoveUpRight size="16" class="mr-1" />
 				<WithUnits value={statistics.global.elevation.gain} type="elevation" />
-				<MoveDownRight size="18" class="mx-1" />
+				<MoveDownRight size="16" class="mx-1" />
 				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
 			</span>
 		</Tooltip>
@@ -58,7 +58,7 @@
 				)} / {$_('quantities.total')})"
 			>
 				<span class="flex flex-row items-center">
-					<Zap size="18" class="mr-1" />
+					<Zap size="16" class="mr-1" />
 					<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
 					<span class="mx-1">/</span>
 					<WithUnits value={statistics.global.speed.total} type="speed" />
@@ -71,7 +71,7 @@
 				label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})"
 			>
 				<span class="flex flex-row items-center">
-					<Timer size="18" class="mr-1" />
+					<Timer size="16" class="mr-1" />
 					<WithUnits value={statistics.global.time.moving} type="time" />
 					<span class="mx-1">/</span>
 					<WithUnits value={statistics.global.time.total} type="time" />

website/src/lib/components/embedding/Embedding.svelte

@@ -260,9 +260,7 @@
 					options.elevation.power ? 'power' : null
 				].filter((dataset) => dataset !== null)}
 				elevationFill={options.elevation.fill}
-				panelSize={options.elevation.height}
 				showControls={options.elevation.controls}
-				class="py-2"
 			/>
 		{/if}
 	</div>

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -165,35 +165,35 @@
 						<Checkbox id="show-speed" bind:checked={options.elevation.speed} />
 						<Label for="show-speed" class="flex flex-row items-center gap-1">
 							<Zap size="16" />
-							{$_('chart.show_speed')}
+							{$_('quantities.speed')}
 						</Label>
 					</div>
 					<div class="flex flex-row items-center gap-2">
 						<Checkbox id="show-hr" bind:checked={options.elevation.hr} />
 						<Label for="show-hr" class="flex flex-row items-center gap-1">
 							<HeartPulse size="16" />
-							{$_('chart.show_heartrate')}
+							{$_('quantities.heartrate')}
 						</Label>
 					</div>
 					<div class="flex flex-row items-center gap-2">
 						<Checkbox id="show-cad" bind:checked={options.elevation.cad} />
 						<Label for="show-cad" class="flex flex-row items-center gap-1">
 							<Orbit size="16" />
-							{$_('chart.show_cadence')}
+							{$_('quantities.cadence')}
 						</Label>
 					</div>
 					<div class="flex flex-row items-center gap-2">
 						<Checkbox id="show-temp" bind:checked={options.elevation.temp} />
 						<Label for="show-temp" class="flex flex-row items-center gap-1">
 							<Thermometer size="16" />
-							{$_('chart.show_temperature')}
+							{$_('quantities.temperature')}
 						</Label>
 					</div>
 					<div class="flex flex-row items-center gap-2">
 						<Checkbox id="show-power" bind:checked={options.elevation.power} />
 						<Label for="show-power" class="flex flex-row items-center gap-1">
 							<SquareActivity size="16" />
-							{$_('chart.show_power')}
+							{$_('quantities.power')}
 						</Label>
 					</div>
 				</div>

website/src/lib/docs/en/files-and-stats.mdx

@@ -73,7 +73,7 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
 
 ### Additional data
 
-Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+Using the button at the bottom-right of the elevation profile, you can optionally color the elevation profile by:
 - **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
 - **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
 This is only available for files created with **gpx.studio**.

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

@@ -175,7 +175,6 @@
 				{slicedGPXStatistics}
 				additionalDatasets={$additionalDatasets}
 				elevationFill={$elevationFill}
-				panelSize={200}
 			/>
 		</div>
 		<div class="flex flex-col items-center">

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

@@ -92,8 +92,6 @@
 					{slicedGPXStatistics}
 					bind:additionalDatasets={$additionalDatasets}
 					bind:elevationFill={$elevationFill}
-					panelSize={$bottomPanelSize}
-					class="py-2"
 				/>
 			{/if}
 		</div>