[Glitch] Fix issues in RTL layout in web UI

Port 9184522cb49d87a58184a0561d46575ea1b5667d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

2 files changed, 36 insertions, 1 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 85982d938..b21ed9dd6 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -339,6 +339,7 @@
   background: darken($ui-base-color, 8%);
   border-radius: 4px;
   padding-bottom: 44px;
+  direction: ltr;
 
   &.editable {
     border-radius: 0;
@@ -386,6 +387,7 @@
   max-width: 100%;
   border-radius: 4px;
   box-sizing: border-box;
+  direction: ltr;
 
   &.editable {
     border-radius: 0;
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index 8a275d82f..2375bac90 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -7,6 +7,34 @@ body.rtl {
     padding-right: 15px;
   }
 
+  .radio-button__input {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+
+  .directory__card__bar .display-name {
+    margin-left: 0;
+    margin-right: 15px;
+  }
+
+  .display-name {
+    text-align: right;
+  }
+
+  .notification__message {
+    margin-left: 0;
+    margin-right: 68px;
+  }
+
+  .drawer__inner__mastodon > img {
+    transform: scaleX(-1);
+  }
+
+  .notification__favourite-icon-wrapper {
+    left: auto;
+    right: -26px;
+  }
+
   .landing-page__logo {
     margin-right: 0;
     margin-left: 20px;
@@ -152,7 +180,6 @@ body.rtl {
   }
 
   .status__action-bar {
-
     &__counter {
       margin-right: 0;
       margin-left: 11px;
@@ -345,6 +372,12 @@ body.rtl {
     }
   }
 
+  .columns-area--mobile .column,
+  .columns-area--mobile .drawer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .public-layout {
     .header {
       .nav-button {