UI Defects - Featured Image

[cnaveenkumar]

Hi Team,

I see a UI bug when uploading an svg image as a featured image. (includes a screenshot for reference. )

[sabernhardt]

Welcome to Trac and thanks for the report!

An SVG does not display well there with the absolute positioning.

The ​Safe SVG plugin fixes that with:

img.components-responsive-wrapper__content[src$=".svg"] {
    position: relative;
}

[hilayt24]

.editor-post-featured-image__container .editor-post-featured-image__preview .components-responsive-wrapper span {
	padding-bottom: 0 !important;
}

.editor-post-featured-image__container .editor-post-featured-image__preview .components-responsive-wrapper .components-responsive-wrapper__content{
	position: static !important;
}
{{{

}}}

This will override the stylings that result in the error. And it solves the issue. Padding is also be removed from the span tag as its inline padding effects the images in twenty-twenty-one theme
Result of changes: ​https://www.awesomescreenshot.com/image/13965113?key=0689b1139b50a2c8bc1c573368dc2179

[mehdi01]

Hello @cnaveenkumar Thanks for your report.

I was just checking is the problem is solved or not, in the mean time I just got another problem. When I tried to upload a SVG file as Featured Image, It's shows that it's not supported file type.

(Attached the Screenshot)