Over-scaled and unreadable mail body on mobile

[hrb-hub]

• Mail bodies containing preformatted text (<pre>) tend to get over-scaled and become unreadable on mobile due to the preformatted text not being broken up as it should. This is caused by the styling not being applied due to an incorrect selector. fixing this would already improves scaling and readability on mobile for mail bodies that contain <pre>.
• Mail bodies can also get over-scaled and become unreadable when they contain a long unbreakable line of text, like a long plain text url for example. A solution to this could be to wrap these unbreakable long lines of text using something like overflow-wrap: anywhere when scaling exceeds a certain threshold.

Test notes

• Preformatted text wraps on mobile but not on desktop or web.
• On mobile:
  • Super long unbroken text (like a long plain text url) is wrapped and the mail is readable without the need to zoom.
  • Zoomed out mails are still readable.
  • Formatting of HTML emails (like newsletters, etc...) is preserved, or at the very least close.

Time spent: 2.5h