From edcf2fd7567d8824eea9ae4c361b7c12925de09c Mon Sep 17 00:00:00 2001 From: Maxim Beder Date: Fri, 14 Feb 2025 16:55:10 +0100 Subject: [PATCH] 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 98fc6e1..97d22a7 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 = ( <> {formatMessage(messages.bannerAlt)}