Fix images pixelated because of border (#7732)

Do not show in changelog

Author: ClementPasteau

newIDE/app/src/AssetStore/ShopTiles.js

@@ -39,7 +39,7 @@ const styles = {
   previewImage: {
     width: '100%',
     display: 'block',
-    objectFit: 'cover',
+    objectFit: 'contain',
     borderRadius: 8,
     border: '1px solid lightgrey',
     boxSizing: 'border-box', // Take border in account for sizing to avoid cumulative layout shift.

newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/EducationCurriculumLesson.js

@@ -30,7 +30,7 @@ const styles = {
   container: { maxWidth: 850 },
   thumbnail: {
     display: 'block', // Display as a block to prevent cumulative layout shift.
-    objectFit: 'cover',
+    objectFit: 'contain',
     verticalAlign: 'middle',
     borderRadius: 8,
     width: '100%',

newIDE/app/src/UI/ImageTileGrid.js

@@ -46,7 +46,7 @@ const styles = {
   },
   thumbnailImageWithDescription: {
     display: 'block', // Display as a block to prevent cumulative layout shift.
-    objectFit: 'cover',
+    objectFit: 'contain',
     verticalAlign: 'middle',
     width: '100%',
     borderRadius: 8,