Fix: Correct text cut-off in pagination buttons (#1486)

[aerotrail-chandrikatalla]

Title: Fix: Correct text cut-off in pagination buttons

Description:

This pull request addresses the bug where the text in the pagination buttons was being cut off at the bottom.

Details of the fix:

I have added padding: 1px 0; to the .ouiButtonEmpty__text class in _button_empty.scss to provide a small amount of vertical space, which prevents the text from being cropped.

Closes Issue: Fixes #1486

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[ruanyl]

Hi @aerotrail-chandrikatalla , thanks for raising the PR. Just for the context, there was another PR that supposed to fix the issue, could you attach a screenshot for the issue that you had for me to better understand why the original fix didn't work?
https://github.com/opensearch-project/oui/pull/1490/files

[aerotrail-chandrikatalla]

Hi @aerotrail-chandrikatalla , thanks for raising the PR. Just for the context, there was another PR that supposed to fix the issue, could you attach a screenshot for the issue that you had for me to better understand why the original fix didn't work? https://github.com/opensearch-project/oui/pull/1490/files

Hello @ruanyl ,I've attached a screenshot of the issue below. The text in the pagination buttons was being cut off at the bottom.
I also reviewed the original fix in PR #1490. I can see that PR was focused on button animations and transitions, as it removed the animation.
My pull request addresses a different problem. The text cut-off was caused by a lack of vertical padding, which was not addressed in PR #1490. My change specifically adds padding to the button text, which is a separate fix for this visual bug.

[ruanyl]

@aerotrail-chandrikatalla #1490 was supposed to fix the text cutting off issue described in #1486 , not about animation.

Could you please highlight the issue on the screenshot you share? I tried locally as well, but couldn't figure out how this padding: 1px 0 affects the text display.

[aerotrail-chandrikatalla]

@aerotrail-chandrikatalla #1490 was supposed to fix the text cutting off issue described in #1486 , not about animation.

Could you please highlight the issue on the screenshot you share? I tried locally as well, but couldn't figure out how this padding: 1px 0 affects the text display.

After change in padding(in my local machine)

Before change (in my local machine) (it may vary)

Hope you understood about the padding issue

[ruanyl]

@aerotrail-chandrikatalla Thanks for sharing the details, unfortunately I'm not able to reproduce on version 1.21, could you share which the OUI version you're using?

[aerotrail-chandrikatalla]

@aerotrail-chandrikatalla Thanks for sharing the details, unfortunately I'm not able to reproduce on version 1.21, could you share which the OUI version you're using?

@ruanyl I'm using OUI version 2.0.0.