Document two CSS limits of Yahoo Mail

[VPS-Ricky]

Percentage columns would have removed the calc() altogether, but they let the narrow column shrink below bodyWidth, so the layout would change in every client instead of only in the ones with the defect.

---

Task: https://vivid-planet.atlassian.net/browse/PHSB2C-13730

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Team

Run ID: 935f5e43-23fe-4048-b382-94b9c0c71ea0

📥 Commits

Reviewing files that changed from the base of the PR and between 16f2510 and af302d4.

📒 Files selected for processing (8)

• docs/docs/3-features-modules/13-building-html-emails/1-email-basics.md
• docs/docs/3-features-modules/13-building-html-emails/5-customization.md
• docs/docs/3-features-modules/13-building-html-emails/6-layout-patterns.md
• packages/mail-react/src/__stories__/diagnostics/ImageBorderRadius.stories.tsx
• packages/mail-react/src/__stories__/layout-patterns/AsymmetricTwoColumnLayout.stories.tsx
• skills/dextinity-mail-react/SKILL.md
• skills/dextinity-mail-react/references/layout-patterns.md
• skills/dextinity-mail-react/references/styling-and-customization.md

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes

  • Improved responsive email layouts in Yahoo Mail and Outlook.com by providing percentage-based fallbacks when calc() is unsupported.
  • Improved element sizing in Yahoo Mail where height declarations are converted to min-height.

• Documentation

  • Added compatibility guidance for CSS sizing, flexible columns, table-based layouts, and reliable height handling across email clients.
  • Updated asymmetric two-column layout guidance with fluid-width fallback calculations.

Walkthrough

The changes document Yahoo Mail and Outlook.com CSS limitations. Responsive email stories and references now add percentage width fallbacks before calc() declarations.

Changes

Email client compatibility

Layer / File(s)	Summary
Client compatibility guidance docs/docs/3-features-modules/13-building-html-emails/1-email-basics.md, docs/docs/3-features-modules/13-building-html-emails/5-customization.md, skills/dextinity-mail-react/SKILL.md, skills/dextinity-mail-react/references/styling-and-customization.md	The documentation describes dropped calc() declarations in Yahoo Mail and Outlook.com. It also describes Yahoo Mail conversion of height to min-height and related sizing workarounds.
Responsive width fallbacks docs/docs/3-features-modules/13-building-html-emails/6-layout-patterns.md, packages/mail-react/src/__stories__/diagnostics/ImageBorderRadius.stories.tsx, packages/mail-react/src/__stories__/layout-patterns/AsymmetricTwoColumnLayout.stories.tsx, skills/dextinity-mail-react/references/layout-patterns.md	Responsive layouts calculate floored percentage fallbacks from the narrowest mobile section width. The styles apply these fallbacks before the existing calc() declarations for left, right, RTL, and image text columns.

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

Merge Risk: ⚪ Minimal · up to af302

This change documents email-client CSS limitations and adds percentage fallbacks before existing calc() declarations in example layouts. No concrete merge-blocking behavior or compatibility risk remains identified.

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main documentation change: two Yahoo Mail CSS limitations. It is concise and related to the changeset, although it does not mention the related Outlook.com guidance or…
Description check	✅ Passed	The description explains the rationale for retaining percentage fallbacks with calc() and avoiding layout changes in supported clients. This directly relates to the responsive email layout changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
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.
Requires Human Review	✅ Passed	The PR changes eight files. All documentation and skill changes are excluded by the check. The two changed TSX story files add 16 hand-written source lines, which is below 300. No prohibited authentic…

Full details: Title check

Explanation

The title clearly identifies the main documentation change: two Yahoo Mail CSS limitations. It is concise and related to the changeset, although it does not mention the related Outlook.com guidance or fallback implementation.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (6 skipped: 6 unsupported.)

Full details: Requires Human Review

Explanation

The PR changes eight files. All documentation and skill changes are excluded by the check. The two changed TSX story files add 16 hand-written source lines, which is below 300. No prohibited authentication, authorization, migration, CI, secret, or credential changes appear. No tests are deleted, and no exported declarations change.

✨ 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 mail-react/document-yahoo-mobile-issues

---

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

[VPS-Ricky]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.