Fixed gift page content overlap on window resize

[minimaluminium]

ref https://linear.app/ghost/issue/BER-3673

The gift page vertically centers its left-column content by computing the available space once on mount and applying it as inline margin-top. On resize the cached offset stayed put, so as the viewport shrank the content was pushed below the available area and the sticky right panel overlapped it.

Recomputes on window resize through a requestAnimationFrame-throttled listener so drag-resizes collapse to one measurement per frame. Tier switches still don't trigger a recompute, so the title and tier picker stay anchored when benefits expand or collapse.

[coderabbitai]

Walkthrough

GiftPage's left-column vertical centering now recalculates on mount and on a throttled window resize using requestAnimationFrame, clearing and re-measuring inner marginTop each time and skipping centering on the mobile breakpoint. The portal app package.json version was bumped from 2.68.49 to 2.68.50.

Suggested reviewers

• sagzy

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing gift page content overlap that occurs on window resize events.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem (cached offset on resize causing overlap) and the solution (requestAnimationFrame-throttled resize listener).
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch gift-screen-resize-BER-3673

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/portal/src/components/pages/gift-page.js (1)

803-807: 💤 Low value

Consider using event.key instead of deprecated keyCode.

The keyCode property is deprecated. While it still works, consider using event.key === 'Enter' for better future compatibility.

♻️ Suggested update

 const handleEmailKeyDown = (event) => {
-    if (event.keyCode === 13 && !isPurchasing) {
+    if (event.key === 'Enter' && !isPurchasing) {
         handlePurchase(event);
     }
 };

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/portal/src/components/pages/gift-page.js` around lines 803 - 807, The
handler handleEmailKeyDown uses the deprecated event.keyCode; update it to check
event.key === 'Enter' instead to ensure future compatibility and readability,
e.g., in handleEmailKeyDown keep the same guard for !isPurchasing and call
handlePurchase(event) when event.key === 'Enter'; ensure the event parameter
type (KeyboardEvent) is compatible if using TypeScript/PropTypes and preserve
existing behavior of not triggering while isPurchasing.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/portal/src/components/pages/gift-page.js`:
- Around line 803-807: The handler handleEmailKeyDown uses the deprecated
event.keyCode; update it to check event.key === 'Enter' instead to ensure future
compatibility and readability, e.g., in handleEmailKeyDown keep the same guard
for !isPurchasing and call handlePurchase(event) when event.key === 'Enter';
ensure the event parameter type (KeyboardEvent) is compatible if using
TypeScript/PropTypes and preserve existing behavior of not triggering while
isPurchasing.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ccf25e9e-441d-4a9a-b87e-dd705b325e84

📥 Commits

Reviewing files that changed from the base of the PR and between 561d27f and 72dffd1.

📒 Files selected for processing (2)

• apps/portal/package.json
• apps/portal/src/components/pages/gift-page.js