Prevent navigation in preview panel marketing header links

[jackgranatowski]

Summary

Added onclick="event.preventDefault()" handlers to the navigation links in the preview panel's marketing header to prevent the iframe from navigating to the app's own origin.

Changes

• Added onclick="event.preventDefault()" to three navigation links (Framework, Tokens, Docs) in the MARKETING_BODY HTML template
• Added explanatory comment documenting why this is necessary: the preview iframe uses allow-same-origin (required for contentDocument access), which would otherwise allow real hrefs to navigate the frame itself, causing the configurator to load recursively inside the tiny preview pane

Implementation details

The preview iframe retains allow-same-origin for legitimate functionality (accessing the iframe's contentDocument), but this creates a side effect where navigation links would cause the frame to navigate to the app's own origin. By preventing default link behavior on these marketing navigation elements, we avoid this unintended recursive loading while maintaining the iframe's necessary same-origin access.

https://claude.ai/code/session_01UgZiZAV7HwRbuD9jyDi633

Summary by CodeRabbit

• Bug Fixes
  • Updated the marketing page preview so navigation links no longer trigger unwanted page navigation in the preview area.
  • Improved preview behavior to keep users within the app while interacting with the embedded preview.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 43505c49-974c-4a3e-b7ca-7bb721899371

📥 Commits

Reviewing files that changed from the base of the PR and between 3942980 and ce3476a.

📒 Files selected for processing (1)

• configurator/src/components/shell/PreviewPanel.svelte

---

📝 Walkthrough

Walkthrough

The marketing preview template's navigation anchors (Framework, Tokens, Docs) were updated to include onclick="event.preventDefault()" handlers, preventing default link navigation within the preview iframe while retaining href="#" attributes.

Changes

Preview navigation fix

Layer / File(s)	Summary
Add preventDefault to nav links configurator/src/components/shell/PreviewPanel.svelte	Added onclick="event.preventDefault()" to the three nav anchors in the MARKETING_BODY template to stop default navigation.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• codeslash-dev/SLASHED#328: Both PRs modify preview navigation behavior—this PR prevents nav link clicks from navigating, while the related PR refactors the preview navigation into tabbed sections.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: preventing marketing header links in the preview panel from navigating.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/marketing-preview-links-0y4nwq

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}