fix: tinyMCE images previews in image selection modal

Author: Muhammad Faraz Maqsood

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -28,19 +28,15 @@ 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' }}>
               { thumbnailFallback }
             </div>
           ) : (
             <Image
-              style={{ border: 'none', width: '200px', height: '100px' }}
+              className="selection-modal-image-thumbnail"
               src={asset.externalUrl}
               onError={thumbnailFallback && (() => setThumbnailError(true))}
             />

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%;
+}