Skip to content

Expedition map: center node icons inside foreignObject - #232

Merged
3CordGuy merged 1 commit into
mainfrom
fix/expedition-icon-center
Jun 7, 2026
Merged

Expedition map: center node icons inside foreignObject#232
3CordGuy merged 1 commit into
mainfrom
fix/expedition-icon-center

Conversation

@3CordGuy

@3CordGuy 3CordGuy commented Jun 7, 2026

Copy link
Copy Markdown
Owner

Font-icon glyphs inherit font baseline + line-height inside foreignObject and slip ~1px south of the circle center. Wrap the in a flex-centering div. Verified: icon center matches circle center to floating-point precision after fix.

Font-icon glyphs (ra-footprint, ra-aura, ra-broadsword…) inherit their
font baseline + line-height inside foreignObject, so they slipped ~1px
south of the circle center on mobile. Verified via DOM rects: icon
center used to land at circle.y + 0.92px.

Wrap the <Icon> in a flex centerer div inside the foreignObject. After
fix, icon center matches circle center to floating-point precision
(dy ≈ 1.5e-5). Works for both font icons (RPG-Awesome) and SVG-mask
icons in the same set.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@3CordGuy
3CordGuy merged commit f276248 into main Jun 7, 2026
1 check passed
@3CordGuy
3CordGuy deleted the fix/expedition-icon-center branch June 7, 2026 02:00
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.

1 participant