RocketChat / RocketChat/Rocket.Chat

[Bug] Select dropdown options are not RTL-aligned in Account Preferences

Open
#38,667 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

In Account > Preferences, when the UI is in an RTL language (for example Arabic), the Language select dropdown options are not fully aligned by direction.

The selected value in the closed input looks correct, but the opened options list has direction/alignment inconsistencies.

Video demo of the issue:

https://github.com/user-attachments/assets/012ac91e-7e81-4cb7-b010-b710b37b15a2

Steps to reproduce:
  1. Open http://localhost:3000/account/preferences.
  2. Change language to Arabic and save.
  3. Open the Language select dropdown.
  4. Observe option text alignment and horizontal spacing in the options list.
Expected behavior:
  • Option text in the dropdown should follow RTL direction (logical start).
  • Option inline spacing should be direction-aware and consistent in RTL.
Actual behavior:
  • Option list alignment/spacing appears LTR-oriented in RTL context.
Server Setup Information:
  • Version of Rocket.Chat Server: 8.1.0-develop (local source)
  • License Type:
  • Number of Users:
  • Operating System: Ubuntu
  • Deployment Method: Local development
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version:
  • MongoDB Version:
Client Setup Information
  • Desktop App or Browser Version: All browsrs
  • Operating System: Ubuntu
Additional context

This appears in shared select/options UI classes, so it may affect other dropdowns in RTL pages as well.

Relevant logs:

N/A (UI/CSS issue).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the /account/preferences route and inspect the shared select/options UI classes mentioned in the report. Reproduce the issue with Arabic enabled and compare the closed Language select with its opened options list. Done means option text uses RTL logical alignment and inline spacing remains direction-aware, without regressing other dropdowns.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, internationalization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.