fix: course image height on IOS Safari

Course thumbnails on IOS Safari stretch to the full height of the image,
instead of being limited by width and preserving aspect ratio. This
seems to be a IOS Safari specific behavior[1].

Learner dashboard MFE uses a custom implementation of CourseCardImage,
because the one in Paragon currently doesn't allow the image to be
clickable. Because of that, we are fixing this issue in this repo for
now, instead of fixing it in Paragon, until Paragon updates their
implementation and this repo is updated to use a newer version of
Paragon.

1: https://stackoverflow.com/a/44250830

Author: Cup0fCoffee

src/containers/CourseCard/components/CourseCardImage.jsx

@@ -20,11 +20,13 @@ export const CourseCardImage = ({ cardId, orientation }) => {
   const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
   const { disableCourseTitle } = useActionDisabledState(cardId);
   const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
-  const wrapperClassName = `pgn__card-wrapper-image-cap overflow-visible ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
   const image = (
     <>
       <img
-        className="pgn__card-image-cap show"
+        // w-100 is necessary for images on Safari, otherwise stretches full height of the image
+        // https://stackoverflow.com/a/44250830
+        className="pgn__card-image-cap w-100 show"
         src={bannerImgSrc}
         alt={formatMessage(messages.bannerAlt)}
       />