Fix conditional question embeds with responsive branch charts

[ryooan]

Conditional post embeds currently render a title and footer without either forecast branch because EmbedQuestionPlot handles only individual questions and groups.

Add a compact conditional renderer with the condition, outcome, and both If Yes / If No forecasts. It reuses ConditionalChart for existing forecast availability, CP visibility, resolution, and chart-theme behavior. Branches stack in narrow cards and sit side by side when space permits. Conditional embeds get a 420px default height; explicitly short embeds scroll their content while keeping the footer accessible. Social-preview sizing scales by height to avoid clipping the taller card.

Validation:

• Four regression tests pass: binary, numeric, and date dispatch, plus annulled-branch/hidden-CP/theme forwarding.
• TypeScript and the production build pass.
• ESLint passes for all changed files with one existing effect warning in embed_question_card.tsx. Whole-repository lint was obscured by Windows CRLF checkout errors.
• Browser checked the real renderer with a synthetic binary fixture at 550×420, 360×420, and 360×230. Narrow branches stack; short content scrolls. Local Storybook needed an uncommitted alias workaround, which is not part of this PR.

The country-map consumer will keep conditionals excluded until this renderer is released on Metaculus.

Summary by CodeRabbit

• New Features

  • Added support for displaying conditional questions in embedded views, including “If Yes” and “If No” outcome charts.
  • Conditional charts now reflect resolution status, hidden probability settings, and the selected chart theme.
  • Improved responsive sizing and layout for conditional question embeds, including optimized social preview rendering.

• Tests

  • Added coverage for binary, numeric, and date-based conditional questions, including disabled and hidden-state behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 799e86b1-f88d-405d-bc72-3f54edb18d2c

📥 Commits

Reviewing files that changed from the base of the PR and between c0b59c0 and 3ae4519.

📒 Files selected for processing (5)

• front_end/src/app/(embed)/questions/components/__tests__/embed_conditional_plot.test.tsx
• front_end/src/app/(embed)/questions/components/embed_conditional_plot.tsx
• front_end/src/app/(embed)/questions/components/embed_question_card.tsx
• front_end/src/app/(embed)/questions/components/embed_question_plot.tsx
• front_end/src/app/(embed)/questions/components/embed_screen.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

📝 Walkthrough

Walkthrough

The PR adds conditional question rendering to embedded views. It renders both outcome charts, preserves disabled annulled branches, forwards chart settings, adds conditional scrolling, and assigns conditional embed dimensions.

Changes

Conditional embed support

Layer / File(s)	Summary
Conditional plot and branch validation front_end/src/app/(embed)/questions/components/embed_conditional_plot.tsx, front_end/src/app/(embed)/questions/components/__tests__/embed_conditional_plot.test.tsx	EmbedConditionalPlot renders both conditional branches. Tests cover binary, numeric, and date posts, annulled branches, hidden CP state, and chart themes.
Conditional plot dispatch and scrolling front_end/src/app/(embed)/questions/components/embed_question_plot.tsx, front_end/src/app/(embed)/questions/components/embed_question_card.tsx	Conditional posts use EmbedConditionalPlot. Conditional content uses a scrollable flex container while the footer remains outside that container.
Conditional embed sizing front_end/src/app/(embed)/questions/components/embed_screen.tsx	Conditional posts use a clamped width and a height of 420. OG rendering scales conditional posts by viewport height.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant EmbedQuestionPlot
  participant EmbedConditionalPlot
  participant ConditionalChart
  EmbedQuestionPlot->>EmbedConditionalPlot: pass conditional post and theme
  EmbedConditionalPlot->>ConditionalChart: render If Yes chart
  EmbedConditionalPlot->>ConditionalChart: render If No chart

Loading

Merge Risk: ⚪ Minimal · up to 3ae45

Conditional embeds render both supported branches with no established unresolved behavior issue.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: fixing conditional question embeds and adding responsive branch charts.
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 docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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

_{A rabbit hops where forecasts meet,
Two branch charts appear neat.
Yes and No now share the view,
Hidden CP settings travel too.
Annulled paths stay in place,
While embeds size with grace.}

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

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-5186-conditional-embed-charts-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:conditional-embed-charts-3ae4519
🗄️ PostgreSQL	NeonDB branch preview/pr-5186-conditional-embed-charts
⚡ Redis	Fly Redis mtc-redis-pr-5186-conditional-embed-charts

Details

• Commit: 3ae4519ab141bf1a94a050bd9bd7840ee41b6784
• Branch: codex/conditional-embed-charts
• Fly App: metaculus-pr-5186-conditional-embed-charts

---

ℹ️ Preview Environment Info

Isolation:

• PostgreSQL and Redis are fully isolated from production
• Each PR gets its own database branch and Redis instance
• Changes pushed to this PR will trigger a new deployment

Limitations:

• Background workers and cron jobs are not deployed in preview environments
• If you need to test background jobs, use Heroku staging environments

Cleanup:

• This preview will be automatically destroyed when the PR is closed