[BUG] Pagination button for basic table shows text that is cut off at the bottom

[FriedhelmWS]

Describe the bug

A few pixels appear to be cut off from the bottom of the pagination button (empty button), as shown in the screenshots. This issue doesn't appear to occur with empty buttons that are used alone.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page that contains a basic table component
2. See the issue

Expected behavior

No cut off

Screenshots

In OSD:

In OUI documentation (not very obvious due to background):

Host/Environment:

• OUI Version: 2.0
• OSD Version (if applicable): 2.18
• OS: IOS
• Browser and version Chrome 132

Additional context

Causes

In _button_empty.scss:

.ouiButtonEmpty {
@include ouiButton;

border-color: transparent;
background-color: transparent;
box-shadow: none;
// sass-lint:disable-block no-important
transform: none !important; /* 1 */
animation: none !important; /* 1 */
transition-timing-function: ease-in; /* 2 */
transition-duration: $ouiAnimSpeedFast; /* 2 */
line-height: inherit; // here

.ouiButtonEmpty__content {
  padding: 0 $ouiSizeS;
}

.ouiButtonEmpty__text {
  text-overflow: ellipsis;
  overflow: hidden;
}

The line-height: inherit; property causes the button text to inherit a line-height: 1; from ouiBody, which doesn't provide enough height to fully display characters with descenders, such as 'g' and 'y'.

Suggested Fix

.ouiButtonEmpty__text {
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: normal;
}

Add line-height: normal; to the button text only so that the line height is auto-adjusted by the browser (roughly 1.2 according to the docs), without changing the inherited behavior of the parent button styles.

[ruanyl]

@FriedhelmWS I found the original request that introduced the change #1342, it seems it fixed another styling issue, changing it to normal might result in regression.

[FriedhelmWS]

@FriedhelmWS I found the original request that introduced the change #1342, it seems it fixed another styling issue, changing it to normal might result in regression.

@ruanyl Yes, I noticed the original line-height: inherit; was there for a purpose. So I think we can keep this line-height: inherit; but add line-height: normal; to .ouiButtonEmpty__text, which is the child element to the element that originally has line-height: inherit; property.

I think if we do so, the original behavior of the button baseline alignment (which is intended) would not be affected, but can also fix the issue of the button text. This do require some more checking for regression though.

[ruanyl]

@FriedhelmWS Adding line-height: normal; to .ouiButtonEmpty__text seems causing regression. After investigation, I feel adding line-height: inherit; to .ouiButtonEmpty might not be a good idea, because that causes the button to inherit line height from its parent, for example:

<div style={{lineHeight: 100}}>
  <OuiButtonEmpty />
</div>

This button will have line height 100px which is unexpected I believe. The button line-height should only be decided by the button size itself.

I think we should remove line-height: inherit; and make .ouiButtonEmpty__text to be display: flex to fix the issue.