UI problems in RTL languages

[paymanzafar1]

Description:

I am using Persian language which is RTL. There are some problems in different windows as described below. All these bugs are related together, so I posted them in one report:

1. In the home window and all other windows that have scroll-able data (eg. Users, Rooms, ...) , there are 2 scroll bars as shown by number 1 & 2 in the below image:

2. As seen the the above image (number 3) there is no blank margin on the right side of menu items.

3. When there are a lot of items in a side menu (eg. Administration-> Workspace), you see 2 scroll bars for the menu. Again there is no blank margin on the right side of menu items.

4. In the Users, Rooms, Permissions, OAuth Apps windows (and possibly other windows) the beginning part of table header, and table rows content is not visible:

5. In the Chats in progress-> Room information window there are 2 scroll bars:

6. In the Chats in progress-> Message window there are 2 scroll bars:

[paymanzafar1]

Hi @hugocostadev,

These UI problems along with the issue reported in #30094 caused a serious problem in using Rocket.Chat in Persian language.
I will appreciate if you push these two issues to be solved as soon as possible.

Thank you very much

[paymanzafar1]

Hi.

I found a temporary solution for these problems. They are all related to the "rc-scrollbars" component. It seems that it does not support RTL languages.

I edited the index.js file in the following folders, and changed marginRight to marginLeft on line # 546, and built the package.

Rocket.Chat-6.4.0/node_modules/rc-scrollbars/lib/Scrollbars
Rocket.Chat-6.4.0/apps/meteor/node_modules/rc-scrollbars/lib/Scrollbars

It seems that the rc-scrollbars component should be replaced with another component which supports RTL languages.

[abhishekmmgn]

@hugocostadev I would like to work on this issue. I work with React and have prior experience with user interfaces. Kindly assign the task to me.

[paymanzafar1]

Hi,
Is there any update on this?
Horizontal & vertical scrollbars are not suitable for RTL languages. This is a limitation in rc-scrollbars component.

[akshithere]

Hey @paymanzafar1
I was assisting you in issue #32734 there i found about issue #30095 and #30564 for RTL languages. I did some changes for it and want to show you. Here you can take a look.

Before:
https://github.com/RocketChat/Rocket.Chat/assets/130065975/28e7236d-11b0-4317-b6bc-211f5ee488bb

After:
https://github.com/RocketChat/Rocket.Chat/assets/130065975/55d07897-2454-4186-b8a7-11d281e4d76c

I am trying to fix tests now, After that I'll open a PR for the team to review :))
Thanks for your cooperation!

[paymanzafar1]

Hi @akshithere,

Thank you very much.
Yes, in the second video, the horizontal & vertical scrollbar problems are resolved.

But I saw one added problem. As in the below image, items in the right menu are left-adjusted in the menu box. These menu items (workspace, subscription, ....) must be adjusted to the right side of the menu box.

I do not have this problem on my instance as seen below.

The same problem was added in the channel list, ... menu as seen below:

Again, I do not have this problem in my instance as seen below:

Thanks for your time, and cooperation.