exlim/navigator
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix viewport overflow so the Directions panel stays on-screen
All checks were successful
CI / test-and-build (push) Successful in 41s
Details

Browse Source 
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
This commit is contained in:
hermes-explorigin 2026-08-09 21:14:01 +00:00
parent 54345a21bd
commit edd6ba9ae2
4 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/DirectionsPanel.svelte
View File

@ -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%; }

13
src/lib/components/MapView.svelte
View File

@ -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;

12
src/routes/+layout.svelte
View File

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

8
src/routes/+page.svelte
View File

@ -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;
}