From 86e9c6b1faafb04fc57b4b4c90c1017e4263fbc4 Mon Sep 17 00:00:00 2001
From: Muhammad Faraz  Maqsood <faraz.maqsood@A006-01130.local>
Date: Mon, 25 Aug 2025 17:11:02 +0500
Subject: [PATCH] fix: tinyMCE images previews in image selection modal

---
 .../sharedComponents/SelectionModal/GalleryCard.jsx       | 8 ++------
 src/editors/sharedComponents/SelectionModal/index.scss    | 8 ++++++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
index a9f6f5a6e..ac6036154 100644
--- a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -28,11 +28,7 @@ const GalleryCard = ({
     >
       <div className="card-div d-flex flex-row flex-nowrap align-items-center">
         <div
-          className="position-relative"
-          style={{
-            width: '200px',
-            height: '100px',
-          }}
+          className="row justify-content-center align-itmes-center p-2"
         >
           {(thumbnailError && thumbnailFallback) ? (
             <div style={{ width: '200px', height: '100px' }}>
@@ -40,7 +36,7 @@ const GalleryCard = ({
             </div>
           ) : (
             <Image
-              style={{ border: 'none', width: '200px', height: '100px' }}
+              className="selection-modal-image-thumbnail"
               src={asset.externalUrl}
               onError={thumbnailFallback && (() => setThumbnailError(true))}
             />
diff --git a/src/editors/sharedComponents/SelectionModal/index.scss b/src/editors/sharedComponents/SelectionModal/index.scss
index 89e597816..19d975b22 100644
--- a/src/editors/sharedComponents/SelectionModal/index.scss
+++ b/src/editors/sharedComponents/SelectionModal/index.scss
@@ -30,3 +30,11 @@
     margin-bottom: .4375rem;
     margin-top: .4375rem;
 }
+
+.selection-modal-image-thumbnail {
+    width: 180px;
+    height: 101.25px;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+}