From edd6ba9ae2cf8e47095b1a03be792a97e1f2b1b6 Mon Sep 17 00:00:00 2001
From: hermes-explorigin <tim+hermes@thecookiejar.me>
Date: Sun, 9 Aug 2026 21:14:01 +0000
Subject: [PATCH] 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 |  6 +++++-
 src/lib/components/MapView.svelte         | 13 ++++++++++---
 src/routes/+layout.svelte                 | 12 ++++++++++++
 src/routes/+page.svelte                   |  8 ++++++--
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/DirectionsPanel.svelte b/src/lib/components/DirectionsPanel.svelte
index f804b4b..fa469fe 100644
--- a/src/lib/components/DirectionsPanel.svelte
+++ b/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%; }
diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index e7fa411..3ce0722 100644
--- a/src/lib/components/MapView.svelte
+++ b/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;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9cebde5..47e1946 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d9e40f0..8b253b2 100644
--- a/src/routes/+page.svelte
+++ b/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;
 	}