Fix misaligned geocoder results

components/src/maplibre/GeocoderControl/GeocoderControl.mdx

@@ -0,0 +1,24 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as GeocoderControlStories from './GeocoderControl.stories.svelte';
+
+<Meta of={GeocoderControlStories} />
+
+# GeocoderControl
+
+<Primary/>
+<Controls/>
+
+## Maptiler
+
+Maptiler doesn't allow filtering by German admin boundaries, but its `types` seem to map as follows:
+
+<table>
+<thead>
+<th>type</th>
+<th>boundary</th>
+</thead>
+<tr><td>county</td><td>Kreis</td></tr>
+<tr><td>municipality</td><td>Gemeinde</td></tr>
+<tr><td>region</td><td>Bundesland</td></tr>
+</table>

components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -123,7 +123,7 @@
 
 <style>
 	.container {
-		width: 500px;
+		width: 800px;
 		height: 300px;
 	}
 </style>

components/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -25,7 +25,7 @@
 		 */
 		countries?: GeocodingCountry | GeocodingCountry[];
 		/**
-		 * Limit search to one or more result type
+		 * Limit search to one or more result type.
 		 */
 		types?: GeocodingPlaceType | GeocodingPlaceType[];
 		/**
@@ -86,6 +86,9 @@
 			button {
 				cursor: pointer;
 			}
+			* {
+				box-sizing: border-box;
+			}
 		}
 
 		.maplibre-gl-geocoder--error {
@@ -138,7 +141,7 @@
 			left: -1px;
 			list-style: none;
 			position: absolute;
-			width: 100%;
+			width: calc(100% + 2px);
 			top: 100%;
 			z-index: 1000;
 			overflow: hidden;

components/src/maplibre/Tooltip/Tooltip.svelte

@@ -43,7 +43,7 @@
 		closeButton: showCloseButton,
 		closeOnClick: closeOnClick,
 		maxWidth: `${maxWidth}px`,
-		offset: offset
+		offset
 	});
 
 	let el: Node | undefined = $state();
@@ -85,6 +85,7 @@
 	.mouseEvents {
 		pointer-events: all;
 	}
+
 	:global {
 		.maplibregl-popup {
 			top: 0;