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