fix: display right-to-left for rtl-languages in mobile

[meysam81]

This will display the RTL languages from right to left. Tested on mobile using Developer Tools on Firefox.

To reproduce the result in this PR, simply run the devstack on koa.master, open the Developer Tools on either Firefox or Chrome, select Mobile View from the icon on the top right of the Developer Tools, check the display when the following settings are applied:

# /edx/etc/lms.yml
LANGUAGE_CODE: ar

You can optionally change the theme for more thorough testing, though it's not necessary; By copying a theme like nelp to <devstack_root>/../src and with the following change:

# /edx/etc/lms.yml
COMPREHENSIVE_THEME_DIRS:
- '/edx/src'

...
...
...

DEFAULT_SITE_THEME: 'nelp-ecommerce-theme'

Then head to http://localhost:18000 and check the changes to see if an RTL language (like Arabic: ar) is correctly displayed from right to left or not.

[shimulch]

@meysam81, I think the proper thing to do is the following -

diff --git a/lms/static/sass/_header.scss b/lms/static/sass/_header.scss
index aa4236fd74..1949d557de 100644
--- a/lms/static/sass/_header.scss
+++ b/lms/static/sass/_header.scss
@@ -366,7 +366,7 @@
         width: 100%;
         padding: $baseline*0.6 $baseline;
         border-bottom: 1px solid theme-color('light');
-        text-align: left;
+        @include text-align(left);
         cursor: pointer;
 
         &:hover,

This fixed the issue for me and didn't give any error. Can you try this?

[meysam81]

Closing in favor of edx/edx-platform#28861

cc @shimulch