Skip to content

[codex] Stabilize explorer map layout#202

Draft
rdhyee wants to merge 3 commits into
isamplesorg:mainfrom
rdhyee:codex/issue-199-stable-explorer-map
Draft

[codex] Stabilize explorer map layout#202
rdhyee wants to merge 3 commits into
isamplesorg:mainfrom
rdhyee:codex/issue-199-stable-explorer-map

Conversation

@rdhyee
Copy link
Copy Markdown
Contributor

@rdhyee rdhyee commented May 11, 2026

Summary

Fixes #199.

This stabilizes the explorer globe layout so the Cesium container is anchored to viewport height instead of deriving its height from grid-column width. It also reserves bounded space for search status text and the view toolbar so loading/search/table controls cannot move the map frame.

Changes

  • Replaced #cesiumContainer aspect-ratio sizing with --explorer-map-height: clamp(500px, 65vh, 680px).
  • Added a mobile map-height override of clamp(360px, 58vh, 520px).
  • Matched .side-panel max height to the same map-height variable.
  • Added scrollbar-gutter: stable and minmax(0, 1fr) for layout-width stability.
  • Wrapped above-map controls in .explorer-controls, reserved a two-line #searchResults live region, and reserved view-toolbar height so table controls do not shift the table/globe anchor.
  • Added Playwright coverage for desktop and mobile layout stability.

Validation

  • quarto render explorer.qmd
  • node --check tests/playwright/explorer-layout-stability.spec.js
  • env NODE_PATH=/Users/raymondyee/C/src/iSamples/isamplesorg.github.io/node_modules /Users/raymondyee/C/src/iSamples/isamplesorg.github.io/node_modules/.bin/playwright test tests/playwright/explorer-layout-stability.spec.js --project=chromium --reporter=line

The focused Playwright spec passed: 2 tests passed on Chromium.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

explorer: map position and size jump between views because surrounding elements shift

1 participant