Embeds OG scaling

[ncarazon]

This PR improves scaling logic for OG images of embeds.

Before:

After:

Summary by CodeRabbit

• New Features
  • Enhanced social preview (OG) sizing with support for either width- or height-based scaling and improved handling across question and chart types.
• Bug Fixes
  • Improved embed screen rendering and dynamic sizing so content and frames scale consistently in OG and regular modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors OG embed screen sizing: detects OG mode when target width or height is present; adds OG viewport constants; computes ogViewportWidth/Height; enables height-based scaling for Binary/Continuous posts and FanChart graphs; adjusts scaling, snapping, frame styles, and passes effectiveSize/containerWidth to EmbedQuestionCard.

Changes

Cohort / File(s)

Summary

OG Embed Screen Sizing Logic front_end/src/app/(embed)/questions/components/embed_screen.tsx

Replaced strict OG detection with an OR check; added OG_WIDTH/OG_HEIGHT constants; introduced ogViewportWidth/ogViewportHeight and shouldScaleByHeightInOg memo for height-driven scaling (Binary/Continuous posts, FanChart); reworked snapping/contentWidth/scale calculations for OG mode; updated frame styles and swapped snapped → effectiveSize passed to EmbedQuestionCard; made containerWidth aware of OG mode and adjusted justification and dynamic sizing paths accordingly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nudged the view to fit just right,

width or height in morning light,
memos whisper which way to scale,
frames align and cards set sail,
hops of code that never fail 🥕

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Embeds OG scaling' clearly and concisely summarizes the main change: implementing improved scaling logic for Open Graph images in embeds.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

front_end/src/app/(embed)/questions/components/embed_screen.tsx (1)

96-108: Consider extracting shared logic to reduce duplication.

The isBinaryOrContinuous and isFanChart checks duplicate the logic in getSizeForPost (lines 44-57). Consider extracting a helper function like isBinaryOrContinuousOrFanChart(post) to DRY up the code.

♻️ Suggested helper extraction

+function isBinaryOrContinuousOrFanChart(post: PostWithForecasts): boolean {
+  const isBinaryOrContinuous =
+    !!post.question &&
+    (post.question.type === QuestionType.Binary ||
+      ContinuousQuestionTypes.some((t) => t === post.question?.type));
+
+  const isFanChart =
+    isGroupOfQuestionsPost(post) &&
+    post.group_of_questions?.graph_type === GroupOfQuestionsGraphType.FanGraph;
+
+  return isBinaryOrContinuous || isFanChart;
+}

 function getSizeForPost(post: PostWithForecasts, containerWidth: number) {
-  const isBinaryOrContinuous =
-    !!post.question &&
-    (post.question.type === QuestionType.Binary ||
-      ContinuousQuestionTypes.some((t) => t === post.question?.type));
-
-  const isFanChart =
-    isGroupOfQuestionsPost(post) &&
-    post.group_of_questions?.graph_type === GroupOfQuestionsGraphType.FanGraph;
-
-  return isBinaryOrContinuous || isFanChart
+  return isBinaryOrContinuousOrFanChart(post)
     ? getBinaryContinuousSize(containerWidth)
     : getOtherSize(containerWidth);
 }

Then in the component:

-  const shouldScaleByHeightInOg = useMemo(() => {
-    const isBinaryOrContinuous =
-      !!post.question &&
-      (post.question.type === QuestionType.Binary ||
-        ContinuousQuestionTypes.some((t) => t === post.question?.type));
-
-    const isFanChart =
-      isGroupOfQuestionsPost(post) &&
-      post.group_of_questions?.graph_type ===
-        GroupOfQuestionsGraphType.FanGraph;
-
-    return isBinaryOrContinuous || isFanChart;
-  }, [post]);
+  const shouldScaleByHeightInOg = useMemo(
+    () => isBinaryOrContinuousOrFanChart(post),
+    [post]
+  );

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 91be084 and bec12c9.

📒 Files selected for processing (1)

• front_end/src/app/(embed)/questions/components/embed_screen.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

front_end/src/app/(embed)/questions/components/embed_screen.tsx (3)

questions/models.py (1)

• QuestionType (59-64)

front_end/src/constants/questions.ts (1)

• ContinuousQuestionTypes (6-10)

front_end/src/utils/questions/helpers.ts (1)

• isGroupOfQuestionsPost (32-38)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Frontend Checks
• GitHub Check: Backend Checks
• GitHub Check: integration-tests
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (6)

front_end/src/app/(embed)/questions/components/embed_screen.tsx (6)

28-29: LGTM!

The OG viewport constants follow the standard Open Graph image dimensions (1200x630 with a 1.91:1 aspect ratio).

---

85-88: Behavioral change in OG mode detection.

The condition changed from requiring both targetWidth AND targetHeight to accepting either one. This broadens when OG mode activates. The fallback to OG_WIDTH/OG_HEIGHT ensures valid dimensions, but verify that callers expecting the old behavior won't be affected.

---

110-130: LGTM!

The sizing logic correctly handles OG mode:

• Uses OG_WIDTH for snapping to get the largest size bucket in OG mode.
• Height-based scaling ensures Binary/Continuous posts and FanCharts maintain proper proportions.
• contentWidth calculation correctly computes the width needed to fill the viewport after height-based scaling.

---

137-147: LGTM!

Using ogViewportWidth/ogViewportHeight with their fallback values ensures the frame always has valid dimensions in OG mode, even when only one dimension is provided.

---

156-156: LGTM!

The effectiveSize correctly passes the computed contentWidth for OG mode, ensuring the card renders at the appropriate width for height-based scaling scenarios.

---

193-200: LGTM!

Props correctly pass OG-aware sizing:

• effectiveSize includes the adjusted width for height-based scaling.
• containerWidth properly uses contentWidth in OG mode for consistent downstream calculations.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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