Fix RTL inconsistencies

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;
   }

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);

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>

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);
     }
   }
 }

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;
 

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;

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;

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;
 }
 

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
 

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;
+}

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;
+  }
+}
+