Fix viewport overflow so the Directions panel stays on-screen

The page had two stacked 100vh containers (.app and .wrap) which made the
page taller than the viewport and forced scrolling. Fixes:
- .wrap now fills its grid cell (height:100%, min-height:0, overflow:hidden)
  instead of a second 100vh
- .app uses 100dvh + overflow:hidden; html/body/#svelte get height:100%,
  body overflow:hidden
- Directions panel is now viewport-anchored (top:64px/bottom:14px) with a
  max-height and internal overflow-y so it can't exceed the screen
- DirectionsPanel itself scrolls internally when content is tall

src/lib/components/DirectionsPanel.svelte

@@ -274,7 +274,11 @@
 </div>
 
 <style>
-	.dirs { background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: 12px; width: 268px; font: 0.8rem system-ui, sans-serif; color: #0f172a; }
+	.dirs {
+	background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
+	padding: 12px; width: 268px; 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; }
 	.point { padding: 6px 8px; background: #f1f5f9; border-radius: 6px; margin: 4px 0; display: flex; align-items: center; gap: 6px; }
 	.dot { width: 10px; height: 10px; border-radius: 50%; }

src/lib/components/MapView.svelte

@@ -364,7 +364,11 @@
 </div>
 
 <style>
-	.wrap { display: grid; grid-template-rows: auto 1fr; height: 100vh; position: relative; }
+	.wrap {
+	display: grid; grid-template-rows: auto 1fr;
+	height: 100%; min-height: 0;
+	position: relative; overflow: hidden;
+}
 	.topbar {
 		display: flex; align-items: center; gap: 1.5rem;
 		padding: 0 1.25rem; height: 56px;
@@ -400,7 +404,7 @@
 	.geoload { padding: 8px; font-size: 0.75rem; color: #64748b; font-style: italic; }
 	.gname { font-weight: 500; font-size: 0.78rem; line-height: 1.3; }
 
-	.map { width: 100%; height: 100%; z-index: 0; }
+	.map { width: 100%; height: 100%; min-height: 0; z-index: 0; }
 	.notice {
 		position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
 		z-index: 1000; background: #0f172a; color: #fff;
@@ -414,7 +418,10 @@
 		background: #1e293b; color: #e2e8f0; font-size: 0.8rem; cursor: pointer;
 	}
 	.dirbtn:hover { background: #334155; }
-	.dirs-wrap { position: absolute; bottom: 16px; left: 12px; z-index: 1500; }
+	.dirs-wrap {
+	position: absolute; top: 64px; bottom: 14px; left: 12px; z-index: 1500;
+	max-height: calc(100% - 78px); width: 268px; overflow: hidden;
+}
 
 	.legend {
 		position: absolute; top: 66px; right: 12px; z-index: 1500;

src/routes/+layout.svelte

@@ -9,3 +9,15 @@
 </svelte:head>
 
 {@render children()}
+
+<style>
+	:global(html),
+	:global(body),
+	:global(#svelte) {
+		height: 100%;
+		margin: 0;
+	}
+	:global(body) {
+		overflow: hidden;
+	}
+</style>

src/routes/+page.svelte

@@ -53,10 +53,14 @@
 </div>
 
 <style>
-	.app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
+	.app {
+	display: grid; grid-template-rows: auto 1fr;
+	height: 100vh; height: 100dvh;
+	overflow: hidden;
+}
 	.controls {
 		display: flex; align-items: center; gap: 1.25rem;
-		padding: 0.75rem 1.25rem;
+		padding: 0.55rem 1.25rem;
 		background: #1e293b; color: #e2e8f0;
 		font: 0.85rem system-ui, sans-serif; z-index: 500;
 	}