Cover the map container with the preview image

Automattic · Oct 14, 2024 · d1eac40 · d1eac40
1 parent 14fc3c6
commit d1eac40
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/map/edit.js b/projects/plugins/jetpack/extensions/blocks/map/edit.js
@@ -244,6 +244,7 @@ const MapEdit = ( {
 				<img
 					alt={ __( 'Map Preview', 'jetpack' ) }
 					src={ mapStyleObject ? mapStyleObject.preview : previewPlaceholder }
+					style={ { width: '100%', maxHeight: 'var(--map-height)', objectFit: 'cover' } }
 				/>
 			</div>
 		);

diff --git a/projects/plugins/jetpack/extensions/blocks/map/style.scss b/projects/plugins/jetpack/extensions/blocks/map/style.scss
@@ -1,19 +1,21 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .wp-block-jetpack-map {
+	--map-height: 400px;
+
 	.wp-block-group-is-layout-flex:not(.is-vertical) > & {
 		flex-basis: 100%;
 	}
 
 	.wp-block-group-is-layout-flex.is-vertical > & {
 		width: 100%;
 	}
-	
+
 	.wp-block-jetpack-map__gm-container {
 		width: 100%;
 		overflow: hidden;
 		background: $gray-200;
-		min-height: 400px;
+		min-height: var(--map-height);
 		text-align: start;
 	}
 
@@ -37,7 +39,7 @@
 	}
 
 	.wp-block-jetpack-map__mb-container {
-	  height: 400px;
+	  height: var(--map-height);
 	}
 
 	.mapboxgl-popup {
-Original file line number
+Diff line change
@@ Expand Up / @@ -244,6 +244,7 @@ const MapEdit = ( { @@
     				<img
     					alt={ __( 'Map Preview', 'jetpack' ) }
     					src={ mapStyleObject ? mapStyleObject.preview : previewPlaceholder }
+    					style={ { width: '100%', maxHeight: 'var(--map-height)', objectFit: 'cover' } }
     				/>
     			</div>
     		);
@@ Expand Down @@