[MediaCard] Add border-radius when necessary

[alex-page]

WHY are these changes introduced?

Fixes minor visual bug with VideoThumbnail

WHAT is this pull request doing?

Adds a top left and right border-radius to the image in the VideoThumbnail

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Look at the VideoThumbnail example in Storybook

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/MediaCard/MediaCard.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/MediaCard/MediaCard.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/MediaCard/MediaCard.tsx

[dfmcphee]

This looks good to me, but I think we may need a fix for the image media cards as well.

I think adding this to the 'MediaContainer' on small screens would do it

    border-top-left-radius: border-radius();
    border-top-right-radius: border-radius();
    overflow: hidden;

[kyledurand]

This looks good for the portrait card but not so much on landscape

[alex-page]

I have moved the change to .MediaContainer and fixed up the responsive problems.

Video thumbnail desktop

Video thumbnail mobile

Media thumbnail portrait mobile

Media thumbnail portrait desktop

[kyledurand]

👍