fix(overlay): forward card positioning data to renderCard - #5
Merged
Merged
Conversation
renderCard only received step/palette/labels fields, never the layout/width/containerHeight/isExiting that TourCard uses to place itself next to the target — a custom card rendered pinned to the top-left with no positioning at all. Folds those fields into the single cardProps object shared by both call sites. Fixes #4 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014wCD2QPtx1V5YbA9YgT8c8
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014wCD2QPtx1V5YbA9YgT8c8
The ICiceroneCardProps table and the renderCard example were both incomplete in the same way as the bug: neither showed how to position a custom card, so exposing the fields alone would not have helped a consumer use them. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014wCD2QPtx1V5YbA9YgT8c8
eumaninho54
approved these changes
Sep 8, 2026
CI's format:check caught table alignment and unwrapped destructuring that yarn format wasn't run on before the previous commit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014wCD2QPtx1V5YbA9YgT8c8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
renderCard's props now includelayout,width,containerHeightandisExiting— the same positioning dataTourCarditself uses — instead of onlystep/palette/labels/etc. Both call sites inCiceroneOverlaynow share onecardPropsobject instead of the built-in card getting extra props the custom one never saw.Why
Fixes #4. A custom
renderCardrendered pinned to the top-left of the overlay, completely disconnected from the spotlighted target — not next to it, not followingplacement, no arrow. The positioning math (layout,cardWidth,screen.height,isExiting) was computed inuseCiceroneOverlayViewModelbut only ever forwarded to the internalTourCard, never torenderCard. This was also the only documented path to a fully custom card design, and it was silently non-functional for that exact purpose.The fix is additive: fields are only added to
cardProps, so any existingrenderCardimplementation that ignores them keeps working unchanged.How it was verified
yarn lint— zero errors and zero warningsyarn typecheckyarn testyarn example ios)If it touches the tour surface
useCiceroneOverlayViewModelnow assertscardPropscarrieslayout/width/containerHeight/isExiting)TourCardstill positions correctly (no regression), and a customrenderCardusing the new fields now correctly places itself next to the target — matching the exact repro from renderCard doesn't receive positioning data — custom cards render unpositioned, not next to the target #4If it touches the build
Not applicable — no build/alias changes.
🤖 Generated with Claude Code
https://claude.ai/code/session_014wCD2QPtx1V5YbA9YgT8c8