fix: Styling fixes for RTL documents and element hover

[ali2-godaddy]

Summary

There are a few bugs that need to be fixed.

1: Carousel cuts off any overflow which causes hover tooltips to not display properly.
2. Specifying text-align left or right causes issues if consumers use webpack-rtl-plugin as this reverts any instances of left to right, and vice versa.

Changelog

1: Fixed issue by specifying overflow y: visible so hover elements can display properly.

Before:

After:

2: Fixed issue by changing text-align: left to text-align: start which respects document direction attribute.

Before:

After:

Test Plan

Manual testing and verifying storybook cases.

[Copilot]

Pull request overview

This PR updates the carousel’s styling to better support RTL documents and to prevent hover content (e.g., tooltips) from being clipped by the viewport.

Changes:

• Adjusted .carousel-viewport overflow rules to allow vertical overflow to be visible while still clipping horizontally.
• Replaced text-align: left/right with text-align: start and removed the RTL-specific text-align override to avoid issues with RTL CSS post-processing.
• Updated the RTL Storybook story to use text-based slides instead of images.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/stories/index.stories.jsx	Updates the RTL story’s slide content to better demonstrate RTL text layout.
src/rtl.less	Removes RTL-only text-align override for the viewport to avoid left/right flipping conflicts.
src/carousel.less	Updates viewport overflow + alignment rules; modifies selected-slide styling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.