small ui improvements

website/src/lib/components/GPXStatistics.svelte

@@ -64,11 +64,11 @@
                     <span class="mx-1">/</span>
                     <WithUnits value={statistics.global.speed.total} type="speed" />
                 </span>
-                <span slot="tooltip"
+                <span slot="tooltip">
-                    >{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+                    {$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
                         'quantities.moving'
-                    )} / {$_('quantities.total')})</span
+                    )} / {$_('quantities.total')})
-                >
+                </span>
             </Tooltip>
         {/if}
         {#if panelSize > 160 || orientation === 'horizontal'}

website/src/lib/components/toolbar/tools/Elevation.svelte

@@ -13,6 +13,7 @@
 <div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
     <Button
         variant="outline"
+        class="whitespace-normal h-fit"
         disabled={!validSelection}
         on:click={async () => {
             if ($map) {
@@ -20,7 +21,7 @@
             }
         }}
     >
-        <MountainSnow size="16" class="mr-1" />
+        <MountainSnow size="16" class="mr-1 shrink-0" />
         {$_('toolbar.elevation.button')}
     </Button>
     <Help link="./help/toolbar/elevation">

website/src/lib/components/toolbar/tools/Merge.svelte

@@ -65,13 +65,14 @@
     </RadioGroup.Root>
     <Button
         variant="outline"
+        class="whitespace-normal h-fit"
         disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
             (mergeType === MergeType.CONTENTS && !canMergeContents)}
         on:click={() => {
             dbUtils.mergeSelection(mergeType === MergeType.TRACES);
         }}
     >
-		<Group size="16" class="mr-1" />
+        <Group size="16" class="mr-1 shrink-0" />
         {$_('toolbar.merge.merge_selection')}
     </Button>
     <Help link="./help/toolbar/merge">

website/src/lib/components/toolbar/tools/Reduce.svelte

@@ -3,7 +3,11 @@
     import { Button } from '$lib/components/ui/button';
     import { Slider } from '$lib/components/ui/slider';
     import { selection } from '$lib/components/file-list/Selection';
-	import { ListItem, ListRootItem, ListTrackSegmentItem } from '$lib/components/file-list/FileList';
+    import {
+        ListItem,
+        ListRootItem,
+        ListTrackSegmentItem
+    } from '$lib/components/file-list/FileList';
     import Help from '$lib/components/Help.svelte';
     import { Filter } from 'lucide-svelte';
     import { _ } from 'svelte-i18n';
@@ -90,11 +94,17 @@
         });
         $fileObservers.forEach((fileStore, fileId) => {
             if (!unsubscribes.has(fileId)) {
-				let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [fs, sel]).subscribe(
+                let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [
-					([fs, sel]) => {
+                    fs,
+                    sel
+                ]).subscribe(([fs, sel]) => {
                     if (fs) {
                         fs.file.forEachSegment((segment, trackIndex, segmentIndex) => {
-								let segmentItem = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex);
+                            let segmentItem = new ListTrackSegmentItem(
+                                fileId,
+                                trackIndex,
+                                segmentIndex
+                            );
                             if (sel.hasAnyParent(segmentItem)) {
                                 let statistics = fs.statistics.getStatisticsFor(segmentItem);
                                 simplified.set(segmentItem.getFullId(), [
@@ -109,8 +119,7 @@
                             }
                         });
                     }
-					}
+                });
-				);
                 unsubscribes.set(fileId, unsubscribe);
             }
         });
@@ -153,11 +162,11 @@
     </div>
     <Label class="flex flex-row justify-between">
         <span>{$_('toolbar.reduce.tolerance')}</span>
-		<WithUnits value={tolerance / 1000} type="distance" decimals={3} />
+        <WithUnits value={tolerance / 1000} type="distance" decimals={3} class="font-normal" />
     </Label>
     <Label class="flex flex-row justify-between">
         <span>{$_('toolbar.reduce.number_of_points')}</span>
-		<span>{currentPoints}/{maxPoints}</span>
+        <span class="font-normal">{currentPoints}/{maxPoints}</span>
     </Label>
     <Button variant="outline" disabled={!validSelection} on:click={reduce}>
         <Filter size="16" class="mr-1" />

website/src/lib/components/toolbar/tools/Time.svelte

@@ -293,11 +293,11 @@
             </div>
         {/if}
     </fieldset>
-    <div class="flex flex-row gap-2">
+    <div class="flex flex-row gap-2 items-center">
         <Button
             variant="outline"
             disabled={!canUpdate}
-            class="grow"
+            class="grow whitespace-normal h-fit"
             on:click={() => {
                 let effectiveSpeed = getSpeed();
                 if (
@@ -372,7 +372,7 @@
                 });
             }}
         >
-            <CalendarClock size="16" class="mr-1" />
+            <CalendarClock size="16" class="mr-1 shrink-0" />
             {$_('toolbar.time.update')}
         </Button>
         <Button variant="outline" on:click={setGPXData}>

website/src/lib/components/toolbar/tools/Waypoint.svelte

@@ -211,7 +211,7 @@
         <Label for="link">{$_('toolbar.waypoint.link')}</Label>
         <Input bind:value={link} id="link" class="h-8" />
         <div class="flex flex-row gap-2">
-			<div>
+            <div class="grow">
                 <Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
                 <Input
                     bind:value={latitude}
@@ -220,10 +220,10 @@
                     step={1e-6}
                     min={-90}
                     max={90}
-					class="text-xs h-8"
+                    class="text-xs h-8 "
                 />
             </div>
-			<div>
+            <div class="grow">
                 <Label for="longitude">{$_('toolbar.waypoint.longitude')}</Label>
                 <Input
                     bind:value={longitude}
@@ -237,24 +237,23 @@
             </div>
         </div>
     </fieldset>
-	<div class="flex flex-row flex-wrap gap-2">
+    <div class="flex flex-row gap-2 items-center">
         <Button
             variant="outline"
             disabled={!canCreate && !$selectedWaypoint}
-			class="grow"
+            class="grow whitespace-normal h-fit"
             on:click={createOrUpdateWaypoint}
         >
             {#if $selectedWaypoint}
-				<Save size="16" class="mr-1" />
+                <Save size="16" class="mr-1 shrink-0" />
                 {$_('menu.metadata.save')}
             {:else}
-				<CirclePlus size="16" class="mr-1" />
+                <CirclePlus size="16" class="mr-1 shrink-0" />
                 {$_('toolbar.waypoint.create')}
             {/if}
         </Button>
         <Button
             variant="outline"
-			class="ml-auto"
             on:click={() => {
                 selectedWaypoint.set(undefined);
                 resetWaypointData();