fix: Fixed UI anomalies faced when using RTL languages

[akshithere]

Problems Addressed and Context:

For a long time now RTL language users have reported seeing various anomalies in the UI starting from the home page. I investigated the issue and found that the major culprit for a lot of these problems was CustomScrollable component. Which for RTL users shows a default scrollbar of browser as well as our own implemented custom scrollbar too. This results in RTL users seeing two scrollbars a lot of place where there should only have been one scrollbar. This was first reported in August 2023.

Proposed changes (including videos or screenshots)

Before:

https://github.com/RocketChat/Rocket.Chat/assets/130065975/e43ef695-ec81-4f63-af0d-43997e324b94

After:

https://github.com/RocketChat/Rocket.Chat/assets/130065975/ed1930be-4251-4167-a6af-950c47315dfe

A lot of languages gets affected from it and even the basic Home Page suffers. Additionally It has been constantly reported by the users.

Technical Changes

Dynamically adding styles to remove the default scrollbar as we have already implemented the custom scrollbar. Letting default scrollbar visible results in two visible scrollbar for RTL languages. Used a useEffect hook to add the style on Mount and also cleaned it up to avoid potential issues.

Issue(s)

Fixes #30095 Fixes #30564

Steps to test or reproduce

Change the client's language to any RTL language like Persian. Double scrollbars will be seen in the places where only single scrollbar is expected.

Further comments

I was researching about this and found that there is also a property of document object, document.dir which gives us whether the text is going LTR or RTL, I tried to implement that too, but couldn't. Furthermore as this is my first PR at RocketChat I would love to hear any reviews. Thanks.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: dc4a1ebe5f10fd469a97515041eeb0c50503f2e7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[akshithere]

In the recent commits, changed the logic to fix the problem of left aligning text due to my previous logic.

[akshithere]

I would really appreciate a code review :)

[dougfabris]

Hi there, thanks for the contribution! 🚀 💯

Closing this PR because it's stale now and it was already fixed here: #33796

---

Questions? Help needed? Feature Requests?

• Join our Open Server in the #support channel and feel free to raise a question
• Join our Community Forum and search/create a post there