BB-6353 fix: RTL display
Supporting information
Ticket: https://tasks.opencraft.com/browse/BB-6353
Why
- Display of LTR languages is incorrect for RTL UI
What
- Update direction of dynamic element wrappers to auto
- Add custom components for rendering markdown, adding
<bdi>
(usingReactMarkdown
) - Update style to display elements properly in RTL (done in rtl.scss)
Testing instruction
- Checkout the branch in local environment
- Start the application
- Create checklist with RTL and LTR content mixed
- Check and make sure the application displays properly for LTR direction
- Change browser language to Arabic (or any RTL langauge), restart browser
- Check and make sure the application displays properly for RTL direction
Note: Content should contain directional symbols like question mark
Components to check
- Markdown elements: table, unordered list, ordered list
- Title (markdown)
- Label (markdown)
- Form elements
PoW
https://www.loom.com/share/9078899c29dd468b9bebe5bb1f726117
References
Markdown I used for testing: https://pastebin.com/46FmqbiX
Edited by Dat Nguyen