finish tools docs

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

@@ -33,13 +33,19 @@
 
 	function updateSlicedGPXStatistics() {
 		if (validSelection && canCrop) {
-			slicedGPXStatistics.set([
+			$slicedGPXStatistics = [
 				get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
 				sliderValues[0],
 				sliderValues[1]
-			]);
+			];
 		} else {
-			slicedGPXStatistics.set(undefined);
+			$slicedGPXStatistics = undefined;
+		}
+	}
+
+	function updateSliderValues() {
+		if ($slicedGPXStatistics !== undefined) {
+			sliderValues = [$slicedGPXStatistics[1], $slicedGPXStatistics[2]];
 		}
 	}
 
@@ -61,6 +67,13 @@
 		updateSlicedGPXStatistics();
 	}
 
+	$: if (
+		$slicedGPXStatistics !== undefined &&
+		($slicedGPXStatistics[1] !== sliderValues[0] || $slicedGPXStatistics[2] !== sliderValues[1])
+	) {
+		updateSliderValues();
+	}
+
 	const splitTypes = [
 		{ value: SplitType.FILES, label: $_('gpx.files') },
 		{ value: SplitType.TRACKS, label: $_('gpx.tracks') },
@@ -72,7 +85,7 @@
 	$: splitAs.set(splitType.value);
 
 	onDestroy(() => {
-		slicedGPXStatistics.set(undefined);
+		$slicedGPXStatistics = undefined;
 	});
 </script>
 
@@ -88,12 +101,12 @@
 		<Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}
 	</Button>
 	<Separator />
-	<Label class="flex flex-row gap-3 items-center">
+	<Label class="flex flex-row flex-wrap gap-3 items-center">
 		<span class="shrink-0">
 			{$_('toolbar.scissors.split_as')}
 		</span>
 		<Select.Root bind:selected={splitType}>
-			<Select.Trigger class="h-8">
+			<Select.Trigger class="h-8 w-fit grow">
 				<Select.Value />
 			</Select.Trigger>
 			<Select.Content>

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

@@ -160,10 +160,10 @@
 		$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
 </script>
 
-<div class="flex flex-col gap-3 w-96 {$$props.class ?? ''}">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-2">
 		<div class="flex flex-row gap-2 justify-center">
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2 grow">
 				<Label for="speed" class="flex flex-row">
 					<Zap size="16" class="mr-1" />
 					{#if $velocityUnits === 'speed'}
@@ -207,7 +207,7 @@
 					{/if}
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2 grow">
 				<Label for="duration" class="flex flex-row">
 					<Timer size="16" class="mr-1" />
 					{$_('toolbar.time.total_time')}
@@ -229,7 +229,7 @@
 				disabled={!canUpdate}
 				locale={get(locale) ?? 'en'}
 				placeholder={$_('toolbar.time.pick_date')}
-				class="w-[211px]"
+				class="w-fit grow"
 				onValueChange={async () => {
 					await tick();
 					updateEnd();
@@ -240,7 +240,7 @@
 				step={1}
 				disabled={!canUpdate}
 				bind:value={startTime}
-				class="w-[100px]"
+				class="w-fit"
 				on:input={updateEnd}
 			/>
 		</div>
@@ -254,7 +254,7 @@
 				disabled={!canUpdate}
 				locale={get(locale) ?? 'en'}
 				placeholder={$_('toolbar.time.pick_date')}
-				class="w-[211px]"
+				class="w-fit grow"
 				onValueChange={async () => {
 					await tick();
 					updateStart();
@@ -265,7 +265,7 @@
 				step={1}
 				disabled={!canUpdate}
 				bind:value={endTime}
-				class="w-[100px]"
+				class="w-fit"
 				on:change={updateStart}
 			/>
 		</div>

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

@@ -195,7 +195,7 @@
 			</div>
 		</div>
 	</fieldset>
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row flex-wrap gap-2">
 		<Button
 			variant="outline"
 			disabled={!canCreate && !$selectedWaypoint}
@@ -212,6 +212,7 @@
 		</Button>
 		<Button
 			variant="outline"
+			class="ml-auto"
 			on:click={() => {
 				selectedWaypoint.set(undefined);
 				resetWaypointData();