diff --git a/src/lib/components/DirectionsPanel.svelte b/src/lib/components/DirectionsPanel.svelte
index bdc594d..121f1d8 100644
--- a/src/lib/components/DirectionsPanel.svelte
+++ b/src/lib/components/DirectionsPanel.svelte
@@ -371,7 +371,7 @@
 <style>
 	.dirs {
 		background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-		padding: 12px; width: 280px; font: 0.8rem system-ui, sans-serif; color: #0f172a;
+		padding: 12px; min-width: 240px; max-width: 340px; font: 0.8rem system-ui, sans-serif; color: #0f172a;
 		box-sizing: border-box; max-height: 100%; overflow-y: auto;
 	}
 	.dir-head { font-weight: 700; margin-bottom: 8px; }
diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index 39cca1e..f5c9943 100644
--- a/src/lib/components/MapView.svelte
+++ b/src/lib/components/MapView.svelte
@@ -734,7 +734,7 @@
 	.dirbtn:hover { background: #334155; }
 	.dirs-wrap {
 	position: absolute; top: 64px; bottom: 14px; left: 12px; z-index: 1500;
-	max-height: calc(100% - 78px); width: 268px; overflow: hidden;
+	max-height: calc(100% - 78px); width: auto; max-width: min(340px, calc(100% - 24px)); overflow: hidden;
 }
 
 	.legend {