RocketChat / RocketChat/Rocket.Chat
[UI/UX] [i18n] Comprehensive Arabic RTL improvements: Alignment, Missing Translations, and Dropdown Logic
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description
While testing the latest develop branch in Arabic (RTL), I identified several UI/UX inconsistencies and a functional bug in the Account Preferences and Sidebar menus. These issues affect the usability for RTL users.
Steps to reproduce
- Set the language to Arabic.
- Navigate to Account > Preferences.
- Expand and then collapse the "General" (عام) section while a dropdown is open.
- Open the Display Options menu from the Sidebar/Home header.
Observed Behavior
- Functional Bug (Sticky Dropdown): In Account Preferences, opening a dropdown (e.g., "Do not ask me again list") and then collapsing its parent section causes the "Empty" placeholder to remain stuck/floating over other UI elements.
- Icon & Text Overlap: In the Display Options menu, Arabic text labels (e.g., "النشاط", "الاسم") overlap with their corresponding icons due to lack of RTL-specific padding/margins.
- Alignment Issues:
- Numeric inputs (e.g., "Idle time limit") are Left-Aligned.
- The "Empty" placeholder in dropdowns is Left-Aligned.
- Missing Translations: Several keys remain in English, including "Account", "Accessibility & appearance", "Search rooms", and "Empty".
Expected Behavior
- Dropdown menus should unmount or close when their parent container is collapsed.
- Icons in RTL menus should have proper spacing to avoid overlapping with Arabic text.
- All numeric inputs and placeholders should respect RTL direction (Right-Aligned).
- All UI strings should be correctly mapped to their Arabic translations.
Screenshots / Videos
(Please attach the provided videos showing the sticky dropdown and screenshots showing the icon overlap here)
Environment
- Device: MacBook Air M1
- Browser: Chrome
- Rocket.Chat Version: 8.1.0-develop (latest)
I would like to work on this issue.
Please assign it to me.
https://github.com/user-attachments/assets/ef9b4073-a97e-45bb-91ba-f22471d73686
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the reported behavior in Arabic at Account > Preferences and in the Sidebar/Home header's Display Options menu. Check the sticky dropdown, icon spacing, input and placeholder alignment, and untranslated strings against the expected behavior; done means all four RTL and translation issues are resolved and the menus behave correctly when sections collapse.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, internationalization, localization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100