Fix email opt-in modal reflow at 400% zoom

[benitoalba]

Summary

Fixes #1779.

The email opt-in ThickBox retained fixed pixel dimensions and centering offsets when browser zoom reduced the available viewport. This caused parts of the form and its controls to become unreachable at 400% zoom.

• Add a modal-specific class so the responsive overrides do not affect other ThickBox dialogs.
• Constrain the modal to the viewport, center it using its rendered dimensions, and allow its content to scroll vertically.
• Stack the consent text and Subscribe button at narrow viewport widths.
• Add Jest coverage for applying the modal class while preserving focus-trap activation.

Testing

• npm run lint:js -- src/emailOptIn/modal.js tests/jest/emailOptIn/modal.test.js
• npm run test:jest -- tests/jest/emailOptIn/modal.test.js --runInBand
• npm run test:jest -- --runInBand (52 suites, 949 tests)
• npm run build
• git diff --check
• Browser layout fixture at 1920×1080, 960×540, 480×270, and 320×256; confirmed the modal stays within the viewport, avoids horizontal overflow, and exposes the Subscribe button through vertical scrolling.

Checklist

• PR is linked to the main issue in the repo
• Tests are added that cover changes

Summary by CodeRabbit

• Bug Fixes
  • Improved email opt-in modal sizing and positioning across screen sizes.
  • Enhanced modal scrolling and focus management for a more accessible experience.
  • Updated smaller-screen layouts so form buttons stack and fill the available width.
  • Standardized input sizing within the opt-in form.
  • Improved modal behavior during opening to provide a more consistent experience.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 489eb59b-31d8-4c7e-87f3-fe3d7a9ecdb6

📥 Commits

Reviewing files that changed from the base of the PR and between 666322e and e2c2677.

📒 Files selected for processing (3)

• src/emailOptIn/modal.js
• src/emailOptIn/sass/email-opt-in.scss
• tests/jest/emailOptIn/modal.test.js

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

• src/emailOptIn/sass/email-opt-in.scss
• src/emailOptIn/modal.js
• tests/jest/emailOptIn/modal.test.js

---

📝 Walkthrough

Walkthrough

The email opt-in modal now receives a dedicated CSS class during initialization. Responsive sizing, scrolling, input sizing, and narrow-screen button layout are added, with Jest coverage for modal class assignment and focus-trap activation.

Changes

Email opt-in modal

Layer / File(s)	Summary
Modal class and focus-trap initialization src/emailOptIn/modal.js, tests/jest/emailOptIn/modal.test.js	Centralizes Thickbox modal lookup and class assignment, uses it during modal setup and focus-trap binding, and tests focus-trap activation.
Responsive modal layout src/emailOptIn/sass/email-opt-in.scss	Adds border-box sizing, viewport-constrained modal dimensions, scrollable content, and stacked full-width buttons below 600px.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• equalizedigital/accessibility-checker#973: Updates the same Thickbox modal setup and focus-trap binding flow.
• equalizedigital/accessibility-checker#1417: Updates modal initialization tests and focus-trap behavior.

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 clearly describes the primary change: fixing email opt-in modal reflow at 400% zoom.
Linked Issues check	✅ Passed	The changes address issue #1779 by constraining, centering, scrolling, and reflowing the modal at narrow viewport widths.
Out of Scope Changes check	✅ Passed	All code and test changes support the modal reflow objective and related focus-trap behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}