From c9ca75e2e8b732e2f9f6af4923dc7b62b08d166c Mon Sep 17 00:00:00 2001
From: vcoppe <vcoppe@hexaly.com>
Date: Tue, 17 Feb 2026 22:24:14 +0100
Subject: [PATCH] small ui improvements

---
 website/src/lib/components/GPXStatistics.svelte      |  6 +++---
 .../elevation-profile/ElevationProfile.svelte        |  2 +-
 website/src/lib/components/map/Map.svelte            | 11 ++++++++++-
 website/src/routes/[[language]]/app/+page.svelte     | 12 ++++++++++--
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index ecc38577b..40838010f 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -31,13 +31,13 @@
 
 <Card.Root
     class="h-full {orientation === 'vertical'
-        ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
-        : 'w-full'} border-none shadow-none p-0"
+        ? 'min-w-40 sm:min-w-44'
+        : 'w-full h-10'} border-none shadow-none p-0 text-sm sm:text-base"
 >
     <Card.Content
         class="h-full flex {orientation === 'vertical'
             ? 'flex-col justify-center'
-            : 'flex-row w-full justify-between'} gap-4  p-0"
+            : 'flex-row w-full justify-evenly'} gap-4 p-0"
     >
         <Tooltip label={i18n._('quantities.distance')}>
             <span class="flex flex-row items-center">
diff --git a/website/src/lib/components/elevation-profile/ElevationProfile.svelte b/website/src/lib/components/elevation-profile/ElevationProfile.svelte
index 11db47106..3d353a017 100644
--- a/website/src/lib/components/elevation-profile/ElevationProfile.svelte
+++ b/website/src/lib/components/elevation-profile/ElevationProfile.svelte
@@ -64,7 +64,7 @@
     });
 </script>
 
-<div class="h-full grow min-w-0 relative py-2">
+<div class="h-full grow min-w-0 min-h-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 absolute"></canvas>
     {#if showControls}
diff --git a/website/src/lib/components/map/Map.svelte b/website/src/lib/components/map/Map.svelte
index 0d4f3626d..9b5d539db 100644
--- a/website/src/lib/components/map/Map.svelte
+++ b/website/src/lib/components/map/Map.svelte
@@ -129,12 +129,21 @@
         @apply relative;
         @apply top-0;
         @apply left-0;
-        @apply my-2;
         @apply w-[29px];
     }
 
+    div :global(.maplibregl-ctrl-geocoder--icon-loading) {
+        @apply -mt-1;
+        @apply mb-0;
+    }
+
+    div :global(.maplibregl-ctrl-geocoder--icon-close) {
+        @apply my-0;
+    }
+
     div :global(.maplibregl-ctrl-geocoder--input) {
         @apply relative;
+        @apply h-8;
         @apply w-64;
         @apply py-0;
         @apply pl-2;
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index 6c5002e18..5cec7b973 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -30,6 +30,11 @@
         elevationFill,
     } = settings;
 
+    let bottomPanelWidth: number | undefined = $state();
+    let bottomPanelOrientation = $derived(
+        bottomPanelWidth && bottomPanelWidth >= 540 && $elevationProfile ? 'horizontal' : 'vertical'
+    );
+
     onMount(async () => {
         settings.connectToDatabase(db);
         fileStateCollection.connectToDatabase(db).then(() => {
@@ -127,14 +132,17 @@
             />
         {/if}
         <div
-            class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+            bind:offsetWidth={bottomPanelWidth}
+            class="flex {bottomPanelOrientation == 'vertical'
+                ? 'flex-col'
+                : 'flex-row py-2'} gap-1 px-2"
             style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
         >
             <GPXStatistics
                 {gpxStatistics}
                 {slicedGPXStatistics}
                 panelSize={$bottomPanelSize}
-                orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+                orientation={bottomPanelOrientation == 'horizontal' ? 'vertical' : 'horizontal'}
             />
             {#if $elevationProfile}
                 <ElevationProfile