fix: card image aspect ratios

[benlife5]

Three of the migrations were failing to apply the aspect ratio because the dropdown select value is 1.78 but the division was returning 1.77777778

Also fixes that Product Cards weren't responding to the aspect ratio style prop

[github-actions]

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

[coderabbitai]

Walkthrough

Event and Insight section slot migrations now compute aspectRatio by dividing width by height, rounding the result to two decimal places, and falling back to 16/9 when dimensions are missing. Product section slot sets the ImageSlot aspectRatio to 1.78. ProductCard image styling was changed from a fixed small-screen height (h-auto sm:h-[200px]) to a flexible minimum height (h-auto sm:min-h-[200px]); no other behavior or API signatures were changed.

Suggested reviewers

• colton-demetriou
• mkilpatrick
• briantstephan

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: card image aspect ratios' accurately summarizes the main change of fixing aspect ratio issues in card images across multiple components and migrations.
Description check	✅ Passed	The description clearly explains the two main issues being fixed: aspect ratio precision mismatches in migrations and Product Cards not responding to aspect ratio styles.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch image-aspect-ratios

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a7fb4fb and d067850.

⛔ Files ignored due to path filters (22)

• packages/visual-editor/src/components/testing/screenshots/EventSection/[desktop] version 0 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/EventSection/[desktop] version 7 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] default props with document data.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] default props with empty document.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 0 props with constant value.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 0 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 15 props with missing ctaType.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 31 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 31 props with static values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 7 props with constant value.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[desktop] version 7 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[mobile] version 0 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[mobile] version 7 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] default props with document data.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] default props with empty document.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 0 props with constant value.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 0 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 15 props with missing ctaType.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 31 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 31 props with static values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 7 props with constant value.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
• packages/visual-editor/src/components/testing/screenshots/ProductSection/[tablet] version 7 props with entity values.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**

📒 Files selected for processing (1)

• packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx

⏰ 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). (3)

• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: semgrep/ci

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/visual-editor/src/components/migrations/0025_event_section_slots.ts (1)

71-78: LGTM! Identical aspect ratio calculation pattern as Insight section.

The dynamic calculation with two-decimal precision correctly addresses the precision mismatch and adapts to actual image dimensions.

To reduce duplication, consider extracting the aspect ratio calculation into a shared helper function:

// In a shared utilities file
export const calculateAspectRatio = (width?: number, height?: number): number => {
  return width && height
    ? parseFloat((width / height).toFixed(2))
    : 16 / 9;
};

Then use it in both Event and Insight migrations:

                      styles: {
                        width: event.image?.width || 640,
-                        aspectRatio:
-                          event.image?.width && event.image?.height
-                            ? parseFloat(
-                                (
-                                  event.image.width / event.image.height
-                                ).toFixed(2)
-                              )
-                            : 16 / 9,
+                        aspectRatio: calculateAspectRatio(
+                          event.image?.width,
+                          event.image?.height
+                        ),
                      },

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eafaf14 and a7fb4fb.

📒 Files selected for processing (4)

• packages/visual-editor/src/components/migrations/0025_event_section_slots.ts (1 hunks)
• packages/visual-editor/src/components/migrations/0031_product_section_slots.ts (1 hunks)
• packages/visual-editor/src/components/migrations/0032_insight_section_slots.ts (1 hunks)
• packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx (1 hunks)

🔇 Additional comments (2)

packages/visual-editor/src/components/migrations/0032_insight_section_slots.ts (1)

55-62: LGTM! Dynamic aspect ratio calculation with proper precision.

The two-decimal rounding via parseFloat(toFixed(2)) correctly addresses the precision mismatch issue (1.777... → 1.78) while adapting to actual image dimensions. The fallback to 16/9 when dimensions are unavailable is appropriate.

packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx (1)

323-323: LGTM! Enables aspect ratio prop to control image height.

Replacing the Tailwind height classes (h-auto sm:h-[200px]) with inline style={{ height: "auto" }} removes the responsive height override, allowing the aspectRatio style prop (set in the ImageSlot configuration) to properly control the image dimensions.