Issue 956 email icon hyperlinks

[chandans1316]

Issue

Fixes: https://merative.atlassian.net/browse/MERATIVE-956

Description

On the "Headshot" block, when an email hyperlink is used in content, it shows up as a link icon.

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/drafts/Keith/common-spirit-health
• After (Changes from this PR): https://issue-956-email-icon-hyperlinks--merative2--hlxsites.hlx.page/drafts/Keith/common-spirit-health

Test Description

All email hyperlink ([email protected]) should show the attached mail icon instead.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• cdafba9 🔄 (latest)
• 8dcb19e ✅
• 37925f5 ✅
• 1b32558 ✅
• 0431945 ✅
• 38e2fef ❌

[aem-code-sync]

Page	Scores	Audits	Google
/drafts/Keith/common-spirit-health

[joehanchoi]

Icon is oversized on Safari browser windows

[joehanchoi]

Resolved Safari issue

[keith-kaplan]

The email icon is looking good. There needs to be a change to the border top line to ensure spans the fill width of the div. Right now it does not happen.

Design System

Webpage

This is the figma link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=12174%3A53663&mode=dev

[keith-kaplan]

@raj-bluetext did you test this out on mobile/tablet? I'm seeing the one of the person's title get cut off and not wrap to an new line on the container.

[keith-kaplan]

Changes look good and confirmed works on mobile.