Legacy Widget: NoPreview component has extraneous padding

[noisysocks]

Description

When you insert a Legacy Widget block, the default placeholder has some styling issues.

Expected behaviour

• The "Select a legacy widget to display" text should not be truncated.
• The "Select widget" text should be sans-serif.

Screenshots or screen recording

WordPress information

5.8 RC 1 with no Gutenberg Plugin.

[noisysocks]

Also looks like the input labels ("Title" below) are serif again which I thought we'd fixed? Maybe it was a recent fix or a PR was not backported. @tellthemachines

[noisysocks]

Also the title ("Text" below) in the "No preview available" message is large and has too much padding. More CSS bleed no doubt 😅

The video in #30889 shows how it should look.

[tellthemachines]

I think this is expected behaviour. The font-family in those fields is set to system-ui, and Firefox's default font for some reason is Times. You can go into browser settings and change it:

Not sure where the padding on the title is coming from though, that's probably on our side 😅

[noisysocks]

I think this is expected behaviour. The font-family in those fields is set to system-ui, and Firefox's default font for some reason is Times. You can go into browser settings and change it:

OK fair enough!

It looks like @adamziel fixed the truncation in #33141 so let's just fix the NoPreview component's styling issues:

It should look like it did in #30889:

[adamziel]

Fix available in #33200