From bada4215ab89028595eb915230c3669263317d8c Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 28 May 2025 09:55:16 +0200
Subject: [PATCH] Fix overflow issue

---
 .../GeocoderControl.stories.svelte                | 15 +++++++++++++++
 .../GeocoderControl/GeocoderControl.svelte        | 11 ++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 0f10aa00..4b1fee48 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -70,6 +70,21 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="Long input">
+	<DesignTokens>
+		<div class="container">
+			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					placeholder="This is an input with a very long placeholder text"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 500px;
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 5e66c52c..33089664 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -12,7 +12,7 @@
 		 */
 		key: string;
 		/**
-		 * Maximum number of suggestions to display
+		 * Limit the number of returned suggestions
 		 */
 		limit?: number;
 		/**
@@ -24,7 +24,7 @@
 		 */
 		languages?: GeocodingLanguage | GeocodingLanguage[];
 		/**
-		 * Overwrite the default input placeholder text
+		 * Overwrite the default input placeholder
 		 */
 		placeholder?: string;
 	}
@@ -50,6 +50,7 @@
 		countries: countriesArr.join(','),
 		showResultsWhileTyping: true,
 		showResultMarkers: false,
+		debounceSearch: 25,
 		placeholder,
 		limit
 	});
@@ -78,7 +79,7 @@
 		}
 
 		.maplibregl-ctrl-geocoder--input {
-			width: 100%;
+			width: calc(100% - 3.7em);
 			height: 100%;
 			font-family: inherit;
 			font-size: inherit;
@@ -167,10 +168,6 @@
 			flex-direction: column;
 		}
 
-		.maplibregl-ctrl-geocoder--suggestion-match {
-			font-weight: bold;
-		}
-
 		.maplibregl-ctrl-geocoder--suggestion-title,
 		.maplibregl-ctrl-geocoder--suggestion-address,
 		.maplibregl-ctrl-geocoder--result-address {