[QRF-33] Fix contact card links layout

[mohammadxali]

• Use tablet-up instead of tablet-only to have the same layout for contact cards in desktop and tablet
• Use overflow-wrap: break-word; to make sure links are always visible according to this
• Use flex-wrap: wrap; to ensure links can go to next line if they don't fit on a single line

Once you approve, I will port these changes to Bea

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
theme-nextjs-greta-preview	✅ Ready (Inspect)	Visit Preview	Aug 18, 2022 at 8:15AM (UTC)

3 Ignored Deployments

Name	Status	Preview	Updated
theme-nextjs-greta-cookbook	⬜️ Ignored (Inspect)		Aug 18, 2022 at 8:15AM (UTC)
theme-nextjs-greta-photography	⬜️ Ignored (Inspect)		Aug 18, 2022 at 8:15AM (UTC)
theme-nextjs-greta-the-good-newsroom	⬜️ Ignored (Inspect)		Aug 18, 2022 at 8:15AM (UTC)

[riffbyte]

Please add screenshots of story contacts on different screens, or add some contacts to a story, so that the changes can be tested visually :)

[mohammadxali]

@oleg-semyonov Updated with screenshots

[riffbyte]

The fix for the links looks good to me, but I was thinking that the original issue was about Contact cards in stories. Probably better to tackle the issue in a separate PR (since it probably requires some design input from what I see)

[mohammadxali]

@oleg-semyonov As suggested by @iamhugofelix and @alpower in the linear issue, we should use the same contact cards on the whole project I believe? This fix also applies to contact cards in the stories, you can visit one here:
https://theme-nextjs-greta-preview-git-feature-qrf-33-be-be03d8-prezly1.vercel.app/this-is-a-test-story

At the very bottom of the page I have added a contact card in story.

[alpower]

@oleg-semyonov @mohammadxali Just for my learning, do these CSS change only apply to the web view of a story? i.e. they don't affect how a contact is laid out in email for example?

[mohammadxali]

@alpower I believe they only applied to theme, and emails use a different styling mechanism