small ui improvements

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'
+        ? 'min-w-40 sm:min-w-44'
-        : 'w-full'} border-none shadow-none p-0"
+        : '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">

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}

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;

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