Skip to content

Embed pin: right-side overlay that does not shift the map#29

Merged
georgepadayatti merged 1 commit into
mainfrom
fix/embed-pin-overlay-shift
May 18, 2026
Merged

Embed pin: right-side overlay that does not shift the map#29
georgepadayatti merged 1 commit into
mainfrom
fix/embed-pin-overlay-shift

Conversation

@lalc

@lalc lalc commented May 18, 2026

Copy link
Copy Markdown
Member

Summary

In embedded /embed iframes the country detail panel now renders as an absolute overlay anchored at the canvas top-right corner instead of pushing the map sideways or stacking it underneath.

  • `position: absolute` keeps the pin entirely out of the layout flow, so opening it does not change the canvas size, position or the rendered map. Verified by measurement: Sweden's bounding rect is byte-identical before and after the pin opens in `/embed?chrome=minimal`.
  • Top offset is `calc(36px + 0.5rem)` when the toolbar is visible and `0.5rem` when the toolbar is hidden, so the pin sits flush with the canvas top with a symmetric 0.5rem inset from the right edge in both modes.
  • 'Open full profile ->' link on the pin opens in a new tab so embedding host pages do not navigate away when a reader explores a country.

Test plan

  • `/embed?legend=hide&attribution=hide&pin=SE`: pin at top-right of canvas, equal 0.5rem inset, map unchanged.
  • `/embed?chrome=minimal&pin=SE`: same behaviour, map not shifted (Sweden bounding rect identical before/after).
  • `/embed?pin=FR` (defaults): pin sits below toolbar, doesn't collide.
  • 'Open full profile' opens `/tracker/` in a new tab.
  • `npm run typecheck` clean.
  • `npm run lint:prose` clean.

When a country is pinned inside an embedded /embed iframe, render the
detail panel as an absolute overlay anchored at the canvas top-right
instead of pushing the map sideways or stacking it underneath. Key
properties:

- position: absolute so the pin is entirely out of the layout flow.
  Opening the pin does not change the canvas size, position or the
  rendered map (verified: Sweden's bounding rect is byte-identical
  before and after the pin opens in /embed?chrome=minimal).
- Top offset is calc(36px + 0.5rem) when the toolbar is visible and
  0.5rem when the toolbar is hidden, so the pin sits flush with the
  canvas top with equal 0.5rem inset from the right edge in both
  modes.
- 'Open full profile -> ' link opens in a new tab so embedding hosts
  do not navigate away when a reader explores a country.
@lalc lalc requested a review from georgepadayatti as a code owner May 18, 2026 16:47
@georgepadayatti georgepadayatti merged commit aedf8ff into main May 18, 2026
5 checks passed
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.

2 participants