fix double-click in checkbox and select inputs

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -116,8 +116,8 @@
 			<Sheet.Description>
 				{$_('layers.settings_help')}
 			</Sheet.Description>
-			<Accordion.Root class="flex flex-col overflow-hidden">
+			<Accordion.Root class="flex flex-col overflow-hidden" value="layer-selection">
-				<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
+				<Accordion.Item value="layer-selection" class="flex flex-col overflow-hidden">
 					<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
 					<Accordion.Content class="grow flex flex-col border rounded">
 						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
@@ -139,11 +139,13 @@
 						</ScrollArea>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-2">
+				<Accordion.Item value="overlay-opacity">
 					<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
 					<Accordion.Content class="flex flex-col gap-3 overflow-visible">
-						<Label class="flex flex-row gap-2 items-center">
+						<div class="flex flex-row gap-6 items-center">
+							<Label>
 								{$_('layers.custom_layers.overlay')}
+							</Label>
 							<Select.Root bind:selected={$selectedOverlay}>
 								<Select.Trigger class="h-8 mr-1">
 									<Select.Value />
@@ -161,8 +163,8 @@
 									{/each}
 								</Select.Content>
 							</Select.Root>
-						</Label>
+						</div>
-						<Label class="flex flex-row gap-2 items-center">
+						<Label class="flex flex-row gap-6 items-center">
 							{$_('menu.style.opacity')}
 							<div class="p-2 pr-3 grow">
 								<Slider
@@ -187,7 +189,7 @@
 						</Label>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-3">
+				<Accordion.Item value="custom-layers">
 					<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
 					<Accordion.Content>
 						<ScrollArea>
@@ -195,11 +197,17 @@
 						</ScrollArea>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-4">
+				<Accordion.Item value="pois" class="hidden">
+					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
+					<Accordion.Content></Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="heatmap-color" class="hidden">
 					<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
 					<Accordion.Content class="overflow-visible">
-						<Label class="flex flex-row items-center justify-between gap-4"
+						<div class="flex flex-row items-center justify-between gap-6">
-							>{$_('menu.style.color')}
+							<Label>
+								{$_('menu.style.color')}
+							</Label>
 							<Select.Root bind:selected={$selectedHeatmapColor}>
 								<Select.Trigger class="h-8 mr-1">
 									<Select.Value />
@@ -210,13 +218,9 @@
 									{/each}
 								</Select.Content>
 							</Select.Root>
-						</Label>
+						</div>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-5">
-					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
-					<Accordion.Content></Accordion.Content>
-				</Accordion.Item>
 			</Accordion.Root>
 		</Sheet.Header>
 	</Sheet.Content>

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

@@ -129,14 +129,18 @@
 
 <div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-3">
-		<Label class="flex flex-row items-center gap-[6.4px] h-3">
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
-			<Checkbox bind:checked={deleteTrackpoints} class="scale-90" />
+			<Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
+			<Label for="delete-trkpt">
 				{$_('toolbar.clean.delete_trackpoints')}
 			</Label>
-		<Label class="flex flex-row items-center gap-[6.4px] h-3">
+		</div>
-			<Checkbox bind:checked={deleteWaypoints} class="scale-90" />
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
+			<Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
+			<Label for="delete-wpt">
 				{$_('toolbar.clean.delete_waypoints')}
 			</Label>
+		</div>
 		<RadioGroup.Root bind:value={cleanType}>
 			<Label class="flex flex-row items-center gap-2">
 				<RadioGroup.Item value={CleanType.INSIDE} />

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

@@ -270,10 +270,12 @@
 			/>
 		</div>
 		{#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
-			<Label class="mt-0.5 flex flex-row gap-1 items-center">
+			<div class="mt-0.5 flex flex-row gap-1 items-center hidden">
-				<Checkbox disabled={!canUpdate} />
+				<Checkbox id="artificial-time" disabled={!canUpdate} />
+				<Label for="artificial-time">
 					{$_('toolbar.time.artificial')}
 				</Label>
+			</div>
 		{/if}
 	</fieldset>
 	<div class="flex flex-row gap-2">