SelectControl: Remove the line height setting to fix issue with font descenders being cut off

[glendaviesnz]

What?

Removes the fixed lineheight 1 the SelectControl component

Why?

In places like the Gallery block Image size selector this lineheight setting causes font descenders to be cut off

Fixes: #27194

How?

Just removes the lineheight setting and allows it to be inherited

Testing Instructions

• Add a Gallery block and upload an Image that will have a Large option
• In the image size selector in the block inspector check that the descender of the g in the Large is not cut off
• Check a range of other places where SelectControl is used, including Storybook, and make sure there are no unfortunate side effects

Screenshots or screencast

Before:

After:

[ramonjd]

This is looking good in viewports > 600px. There's a slight regression (about 1px) in narrower screen widths.

Before

Wide	Narrow

After

Wide	Narrow

But it's not a huge difference and I think the improvement at desktop widths appears worth it.

As far as I can tell a value of line-height: 1.1; makes things look better.

[ramonjd]

Left a note about narrow screens.

Happy to look again if there's a fix in this PR or a follow up.

[glendaviesnz]

@ramonjd it seems like the following padding css from WP core is the cause of the issue:

.wp-core-ui select {
    padding: 5px 24px 5px 8px;
}

I have pushed an update which resets the top and bottom padding and this seems to fix the issue in wide and narrow screens now.

[ramonjd]

@glendaviesnz

More screenshots === LGTM!

💻

📱

[ciampo]

Thank you for working on this ❤️

Just a small nit — when working in the components package, would you mind adding an entry to the CHANGELOG ? Thank you!

[glendaviesnz]

Just a small nit — when working in the components package, would you mind adding an entry to the CHANGELOG ? Thank you!

Sure, thanks for the reminder, and thanks for adding the details for this one for me 🙏