From 810519b1d41bd938a0e13588d2ef77ea83411e98 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 16 May 2024 10:37:38 +0200
Subject: [PATCH] Fix RTL inconsistencies

---
 .../overview/videos/video-list.component.scss |  3 +-
 .../plugin-search.component.scss              |  2 +-
 .../plugins/shared/plugin-card.component.html |  2 +-
 .../steps/register-step-about.component.scss  |  4 +--
 .../+stats/video/video-stats.component.scss   |  3 +-
 .../edit/video-studio-edit.component.scss     |  3 +-
 .../header/search-typeahead.component.scss    |  3 +-
 .../instance-about-accordion.component.scss   |  3 +-
 .../video-actions-dropdown.component.ts       |  2 +-
 client/src/sass/bootstrap.scss                | 10 ++++++
 client/src/sass/include/_mixins.scss          | 33 +++++++++++++++++++
 11 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index d538ca30a..934e7080b 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -15,8 +15,9 @@ my-embed {
   display: flex;
 
   my-global-icon {
+    @include margin-left(3px);
+
     width: 16px;
-    margin-left: 3px;
     position: relative;
     top: -2px;
   }
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index d7b41f4d8..1406adbf2 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -13,7 +13,7 @@
 }
 
 .search-bar {
-  margin-left: auto;
+  @include margin-left(auto);
 
   input {
     @include peertube-input-text(500px);
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.html b/client/src/app/+admin/plugins/shared/plugin-card.component.html
index c9fe6201c..442d7f6f2 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.html
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.html
@@ -21,7 +21,7 @@
     </div>
 
     <div class="second-row">
-      <div class="description">{{ plugin.description }}</div>
+      <div dir="auto" class="description">{{ plugin.description }}</div>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.scss b/client/src/app/+signup/+register/steps/register-step-about.component.scss
index ab6d6dd4d..3e76ca7a6 100644
--- a/client/src/app/+signup/+register/steps/register-step-about.component.scss
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.scss
@@ -30,7 +30,7 @@ h4 {
   }
 
   .callout-content {
-    margin-left: 30px;
+    @include margin-left(30px);
 
     p {
       margin: 0;
@@ -47,7 +47,7 @@ h4 {
     }
 
     .callout-content {
-      margin-left: 0;
+      @include margin-left(0);
     }
   }
 }
diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index ea75a48d3..99908d243 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -33,13 +33,14 @@
 }
 
 .stats-card {
+  @include margin-right(15px);
+
   display: flex;
   justify-content: center;
   align-items: center;
   height: fit-content;
   min-height: 100px;
   min-width: 200px;
-  margin-right: 15px;
   background-color: pvar(--submenuBackgroundColor);
   margin-bottom: 15px;
 
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.scss b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
index 43f336f59..f04218aee 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
@@ -5,8 +5,9 @@
   display: flex;
 
   .information {
+    @include margin-left(50px);
+
     width: 100%;
-    margin-left: 50px;
 
     > div {
       margin-bottom: 30px;
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index ff43abd4e..b7df5e3e5 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -16,7 +16,8 @@
   display: inline-flex;
   align-self: center;
   position: absolute;
-  right: 5px;
+
+  @include right(5px);
 
   &:hover {
     opacity: 0.8;
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 8337a7154..c5ad4b1f1 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -15,7 +15,8 @@
 }
 
 my-global-icon {
+  @include margin-right(15px);
+
   line-height: 24px;
-  margin-right: 15px;
 }
 
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index 3b8e33ba4..6633b869e 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -84,7 +84,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
     studio: true,
     stats: true
   }
-  @Input() placement = 'left'
+  @Input() placement = 'left auto'
   @Input() moreActions: DropdownAction<{ video: Video }>[][] = []
   @Input({ transform: booleanAttribute }) actionAvailabilityHint = false
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 569958154..8c4729966 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -384,3 +384,13 @@ body {
   // Prevent invalid height in parent: https://stackoverflow.com/a/22425601
   vertical-align: top;
 }
+
+
+// ---------------------------------------------------------------------------
+// RTL compatibility
+// ---------------------------------------------------------------------------
+
+.modal .modal-header .modal-title {
+  margin-inline-end: auto;
+  margin-right: unset;
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3275dd527..83cf6e220 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -817,6 +817,8 @@
   }
 }
 
+// ---------------------------------------------------------------------------
+
 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
   @if $arg2 == null and $arg3 == null and $arg4 == null {
     @include margin-original($arg1, $arg1, $arg1, $arg1);
@@ -844,6 +846,8 @@
   @include rfs($value, margin-inline-end);
 }
 
+// ---------------------------------------------------------------------------
+
 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
   @include padding-left($inline-start);
   @include padding-right($inline-end);
@@ -870,3 +874,32 @@
 @mixin padding-right ($value) {
   @include rfs($value, padding-inline-end);
 }
+
+// ---------------------------------------------------------------------------
+
+
+/**
+ *
+ * inset-inline properties are not supported by iOS < 14.5
+ *
+ */
+
+@mixin right ($value) {
+  right: $value;
+
+  @supports (inset-inline-end: $value) {
+    inset-inline-end: $value;
+    right: unset;
+  }
+}
+
+
+@mixin left ($value) {
+  left: $value;
+
+  @supports (inset-inline-start: $value) {
+    inset-inline-start: $value;
+    left: unset;
+  }
+}
+