ResourceList Bulk Actions label is cut out under the text baseline, making some characters hard to read

[tszekely]

Expected behavior

All text characters should be fully visible. Overflowing text should be hidden and not push other elements beneath the List bounds.

Actual behavior

ResourceList Bulk Actions label is cut out under the text baseline, making some characters (like g, q, y, etc.) hard to read. This is due to the combination of overflow: hidden; and line-height: 1; CSS rule combination. Moreover, the flex & overflow combination doesn't work, overflowing text will push other items over the ResourceList bounds.

First noticed the issue in our project:

And I can reproduce it on the Polaris demo website:

https://polaris.shopify.com/components/lists-and-tables/resource-list#navigation

The line-height property seems duplicated, disabling the second rule (with value 1) appears to fix the issue without visible side-effects.

.Polaris-CheckableButton {
    font-size: 1.5rem;
    font-weight: var(--p-button-font-weight,400);
    line-height: 1.6rem;
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    min-height: 3.6rem;
    min-width: 3.6rem;
    margin: 0;
    padding: .7rem 1.6rem;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    text-align: left;
    border-radius: var(--p-border-radius-base,3px);
    width: 100%;
    background: var(--p-surface);
    box-shadow: var(--p-button-drop-shadow);
    border: 1px solid var(--p-border-neutral-subdued);
    border-top-color: var(--p-border-subdued);
    border-bottom-color: var(--p-border-shadow-subdued);
}

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 6.2.0
• Browser: Google Chrome 90.0.4430.93
• Device: PC
• Operating System: Windows 10

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's design system and dev experience.