From 9a86abae788852f200083f3613593d06c999a1f8 Mon Sep 17 00:00:00 2001
From: Maxim Beder <macsim.beder@gmail.com>
Date: Fri, 14 Feb 2025 16:55:10 +0100
Subject: [PATCH 1/2] 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
---
 src/containers/CourseCard/components/CourseCardImage.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/containers/CourseCard/components/CourseCardImage.jsx b/src/containers/CourseCard/components/CourseCardImage.jsx
index 98fc6e16..97d22a78 100644
--- a/src/containers/CourseCard/components/CourseCardImage.jsx
+++ b/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)}
       />

From 46b792937eca1b63bea7f9beb3d21579e5954c32 Mon Sep 17 00:00:00 2001
From: Maxim Beder <macsim.beder@gmail.com>
Date: Fri, 14 Feb 2025 19:27:54 +0100
Subject: [PATCH 2/2] test: update test snapshots

---
 .../__snapshots__/CourseCardImage.test.jsx.snap           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap
index a0d357c7..964a146f 100644
--- a/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap
+++ b/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 <a
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
   href="home-url"
   onClick={
     {
@@ -18,7 +18,7 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span
@@ -43,12 +43,12 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 
 exports[`CourseCardImage snapshot renders disabled link 1`] = `
 <div
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
 >
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span