fix layout shift

website/src/lib/components/ButtonWithTooltip.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+
+	export let variant:
+		| 'default'
+		| 'secondary'
+		| 'link'
+		| 'destructive'
+		| 'outline'
+		| 'ghost'
+		| undefined = 'default';
+	export let label: string;
+	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger asChild let:builder>
+		<Button builders={[builder]} {variant} {...$$restProps}>
+			<slot />
+		</Button>
+	</Tooltip.Trigger>
+	<Tooltip.Content {side}>
+		<span>{label}</span>
+	</Tooltip.Content>
+</Tooltip.Root>

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -4,6 +4,7 @@
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Help from '$lib/components/Help.svelte';
+	import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Shortcut from '$lib/components/Shortcut.svelte';
 	import {
@@ -105,7 +106,7 @@
 	});
 </script>
 
-{#if minimized}
+{#if minimizable && minimized}
 	<div class="-m-1.5 -mb-2">
 		<Button variant="ghost" class="px-1 h-[26px]" on:click={() => (minimized = false)}>
 			<SquareArrowOutDownRight size="18" />
@@ -116,10 +117,9 @@
 		class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}"
 		in:flyAndScale={{ x: -2, y: 0, duration: 50 }}
 	>
-		<div class="grow flex flex-col gap-3">
+		<div class="flex flex-col gap-3">
-			<Tooltip label={$_('toolbar.routing.use_routing_tooltip')}>
+			<Label class="flex flex-row justify-between items-center gap-2">
-				<Label class="w-full flex flex-row justify-between items-center gap-2">
+				<span class="flex flex-row items-center gap-1">
-					<span class="flex flex-row gap-1">
 					{#if $routing}
 						<Route size="16" />
 					{:else}
@@ -127,13 +127,14 @@
 					{/if}
 					{$_('toolbar.routing.use_routing')}
 				</span>
+				<Tooltip label={$_('toolbar.routing.use_routing_tooltip')}>
 					<Switch class="scale-90" bind:checked={$routing} />
-				</Label>
 					<Shortcut slot="extra" key="F5" />
 				</Tooltip>
+			</Label>
 			{#if $routing}
 				<div class="flex flex-col gap-3" in:slide>
-					<Label class="w-full flex flex-row justify-between items-center gap-2">
+					<Label class="flex flex-row justify-between items-center gap-2">
 						<span class="shrink-0 flex flex-row items-center gap-1">
 							{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')}
 								<Bike size="16" />
@@ -159,28 +160,28 @@
 							</Select.Content>
 						</Select.Root>
 					</Label>
-					<Label class="w-full flex flex-row justify-between items-center gap-2">
+					<Label class="flex flex-row justify-between items-center gap-2">
-						<span class="flex flex-row gap-1"
+						<span class="flex flex-row gap-1">
-							><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</span
+							<TriangleAlert size="16" />
-						>
+							{$_('toolbar.routing.allow_private')}
+						</span>
 						<Switch class="scale-90" bind:checked={$privateRoads} />
 					</Label>
 				</div>
 			{/if}
 		</div>
 		<div class="flex flex-row flex-wrap justify-center gap-1">
-			<Tooltip label={$_('toolbar.routing.reverse.tooltip')}>
+			<ButtonWithTooltip
-				<Button
+				label={$_('toolbar.routing.reverse.tooltip')}
 				variant="outline"
 				class="flex flex-row gap-1 text-xs px-2"
 				disabled={!validSelection}
 				on:click={dbUtils.reverseSelection}
 			>
 				<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
-				</Button>
+			</ButtonWithTooltip>
-			</Tooltip>
+			<ButtonWithTooltip
-			<Tooltip label={$_('toolbar.routing.route_back_to_start.tooltip')}>
+				label={$_('toolbar.routing.route_back_to_start.tooltip')}
-				<Button
 				variant="outline"
 				class="flex flex-row gap-1 text-xs px-2"
 				disabled={!validSelection}
@@ -213,18 +214,16 @@
 				}}
 			>
 				<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
-				</Button>
+			</ButtonWithTooltip>
-			</Tooltip>
+			<ButtonWithTooltip
-			<Tooltip label={$_('toolbar.routing.round_trip.tooltip')}>
+				label={$_('toolbar.routing.round_trip.tooltip')}
-				<Button
 				variant="outline"
 				class="flex flex-row gap-1 text-xs px-2"
 				disabled={!validSelection}
 				on:click={dbUtils.createRoundTripForSelection}
 			>
 				<Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
-				</Button>
+			</ButtonWithTooltip>
-			</Tooltip>
 		</div>
 		<div class="w-full flex flex-row gap-2 items-end justify-between">
 			<Help link={getURLForLanguage($locale, '/help/toolbar/routing')}>