in Gallery Block we are not able to view the character in drop down because of line height

[kmadhak]

Describe the bug
in Gallery Block we are not able to view the character in drop down because of line height

Steps to reproduce the behaviour:

1. Go to 'Editor'
2. Add new page
3. Click on 'add block'
4. Select the block 'Gallery'
5. Add images in Gallery
6. View the options of 'Image size' drop down
7. See error

Expected behaviour
We have to show the characters properly

Screenshots
https://prnt.sc/voe9pu

Video
for more detail please view the attached video
https://www.loom.com/share/d1a011a7ec0e42578919deec867461f4

Editor version:
WordPress version: 5.6-RC1

Desktop:
OS: Windows
Browser chrome
Version 86.0.4240.193 (Official Build) (64-bit)

[tellthemachines]

I can reproduce this in Chrome on Windows; on macOS it's hard to notice as only the very tip of the letter is cut off.

[kmadhak]

Hello @tellthemachines,

As the WordPress version 5.6 is release and I have checked this issue and it is not resolved, please look into it.

Screenshot: https://prnt.sc/w4n79n

Thank you.

[JustinyAhin]

@kmadhak can you please check of the issue is still present? I've just tried to reproduce it but it seems to have been fixed already.

I'm on WordPress 5.6 without the Gutenberg plugin installed. Checked on Firefox Developer Edition, Chrome and Safari.

[tellthemachines]

@JustinyAhin I can still reproduce the issue on 5.6 with or without the Gutenberg plugin. It's much more noticeable on Windows; on macOS only the very bottom edge of the "g" gets cut off.

[kmadhak]

Hello @JustinyAhin and @tellthemachines,

Greetings of the day!!!

I would like to know the progress of this issue, please let me know if you need more detail on it.

Thank you.

[JustinyAhin]

@kmadhak I can not reproduce the issue on a fresh WordPress 5.8-alpha-50761 installation (with and without the Gutenberg plugin).
I am on macOS, so it may not be noticeable there as @tellthemachines said.

Do you work on a Windows environment so that you can test?

Thanks :)

[kmadhak]

Hello @JustinyAhin ,

Greetings of the day!!!

Yes, I am using Windows OS, and on that I am facing issue.

Thank you.

[kmadhak]

Hello @JustinyAhin and @tellthemachines

Greetings of the day!!!

I would like to know the progress of this issue, please let me know if you need more detail on it.

Thank you.

[sybrew]

Gutenberg 11.3 shows this issue. When unsetting line-height from the select/dropdown, the character no longer gets stripped.
This is an issue with Blink (Chromium), not Webkit (Safari).

Similar: woocommerce/woocommerce#24731

[kmadhak]

Hello @JustinyAhin,

Greetings of the day!!!

I would like to know the progress of this issue, please let me know if you need more detail on it.

Thank you.

[glendaviesnz]

I would like to know the progress of this issue, please let me know if you need more detail on it.

I am not seeing this in WP 5.9 and Gutenberg 13.1, and since 5.9 there is a completely refactored Gallery block - @kmadhak can you confirm if you still get this in WP 5.9?

[sybrew]

@glendaviesnz please try any browser other than Safari. This is not an issue with the Gallery Block, but with the overall styling of dropdowns.

^ The last character of the Post Format dropdown is a y, and the Author's username is pgyqj.

This is using WP 6.0-RC1. Viewable with and without Gutenberg 13.1. To learn more, see the very same issue made by the very same company only using Macbooks here woocommerce/woocommerce#24731.

[kmadhak]

Hello @glendaviesnz ,

I have tried to regenerate the issue in WordPress 5.9.3 with and without Gutenberg 13.1 version plugin, and yes I am facing same issue, for more detail please view the attached video and let me know if there is anything.

Thank you.

Recording.36.mp4

[glendaviesnz]

Thanks @kmadhak, I was able to replicate it today - just trying to work out why that component sets a specific line-height of 1. Removing this fixes the issue in the Gallery, but it may break things in other contexts.