Flyout Buttons with Different Font Size are Not Rendered Correctly

[BeksOmega]

Describe the bug

Flyout buttons accept classes. If you give this class a font-size that is different from the standard one, the button does not render correctly.

To Reproduce

Steps to reproduce the behavior:

1. Add the following css to the playground:

.customFlyoutButton .blocklyText {
    font-size: 30px;
}

2. Add the following button to the playground (any toolbox category is fine):
   <button text="test" callbackKey="" web-class="customFlyoutButton"></button>
3. Open the flyout.
4. Observe how the button is not rendered correctly.

Expected behavior

The flyout button should render to have the correct padding around the text, regardless of the height of the text.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 76

Additional context

Thematically related to #2649, but the code is unrelated.

This line is the root of the problem.

[samelhusseini]

Thanks for filing @BeksOmega. I wanted to add that this is more of a general problem with sizing based on font size that's throughout the project. You can find similar bugs with changing the font size of the text input or the .blocklyText class.

[samelhusseini]

Fixed