Ensure SVG Images Without a Width Attribute Are Displayed Correctly in FocalPointPicker (#70061)

vk17-starlord · vk17-starlord · Mamaduka · web-flow · commit 9b48761f3c80 · 2025-05-27T13:45:39.000+04:00
Co-authored-by: vk17-starlord &lt;vineet2003@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: artemiomorales &lt;artemiosans@git.wordpress.org&gt;
Co-authored-by: lichtmetzger &lt;dscqbus@git.wordpress.org&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -32,6 +32,7 @@
 -   `ToggleGroupControl`: Fix active background for empty string value ([#69969](https://github.com/WordPress/gutenberg/pull/69969)).
 -   `ItemGroup`: Fix double border in `ItemGroup` when last item is focused ([#70021](https://github.com/WordPress/gutenberg/pull/70021)).
 -   `__experimentalUseCustomUnits `: Don't mutate 'ALL_CSS_UNITS' default value ([#70037](https://github.com/WordPress/gutenberg/pull/70037)).
+-  `FocalPointPicker`: Fix SVG display when it doesn't provide a width attribute ([#70061](https://github.com/WordPress/gutenberg/pull/70061))..
 
 ### Internal
 
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -53,7 +53,7 @@ export const MediaContainer = styled.div`
 		max-width: 100%;
 		pointer-events: none;
 		user-select: none;
-		width: auto;
+		width: 100%;
 	}
 `;
 

Original file line number	Diff line number	Diff line change
@@ -53,7 +53,7 @@ export const MediaContainer = styled.div`
`53`	`53`	`max-width: 100%;`
`54`	`54`	`pointer-events: none;`
`55`	`55`	`user-select: none;`
`56`		`- width: auto;`
	`56`	`+ width: 100%;`
`57`	`57`	`}`
`58`	`58`	`;
`59`	`59`