diff --git a/src/App.vue b/src/App.vue
index 80ebb525..d80bfe93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
isRTL ? viewport.width - box.right : box.left
+ const inlineEndOf = (box) => isRTL ? viewport.width - box.left : box.right
+
// Popover will be anchored around this element, trigger ref is the container, so
// its children are what are inside the slot. Expect only one v-slot:trigger.
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
@@ -61,7 +66,7 @@ const Popover = {
const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
const screenBox = anchorEl.getBoundingClientRect()
// Screen position of the origin point for popover
- const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+ const origin = { x: inlineStartOf(screenBox) + screenBox.width * 0.5, y: screenBox.top }
const content = this.$refs.content
// Minor optimization, don't call a slow reflow call if we don't have to
const parentBounds = this.boundTo &&
@@ -73,11 +78,11 @@ const Popover = {
// What are the screen bounds for the popover? Viewport vs container
// when using viewport, using default margin values to dodge the navbar
const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
- min: parentBounds.left + (margin.left || 0),
- max: parentBounds.right - (margin.right || 0)
+ min: inlineStartOf(parentBounds) + (margin.left || 0),
+ max: inlineEndOf(parentBounds) - (margin.right || 0)
} : {
min: 0 + (margin.left || 10),
- max: window.innerWidth - (margin.right || 10)
+ max: viewport.width - (margin.right || 10)
}
const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
@@ -122,12 +127,13 @@ const Popover = {
const xOffset = (this.offset && this.offset.x) || 0
const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+ const translateXLogical = isRTL ? -translateX : translateX
// Note, separate translateX and translateY avoids blurry text on chromium,
// single translate or translate3d resulted in blurry text.
this.styles = {
opacity: 1,
- transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+ transform: `translateX(${Math.round(translateXLogical)}px) translateY(${Math.round(translateY)}px)`
}
},
showPopover () {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d18ee3da..afd51cb3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -471,7 +471,7 @@
// Order is not necessary but a good indicator
.media-upload-icon {
order: 1;
- justify-content: left;
+ justify-content: start;
}
.emoji-icon {
@@ -481,7 +481,7 @@
.poll-icon {
order: 3;
- justify-content: right;
+ justify-content: end;
}
.error {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index b5fc89d3..482fbf3a 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -107,6 +107,9 @@
.popover {
transform: translateX(-64px) translateY(5px);
min-inline-size: 70%;
+ [dir="rtl"] & {
+ transform: translateX(64px) translateY(5px);
+ }
}
}
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c6a3a1b..18475bd9 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -243,6 +243,9 @@
.side-drawer-container-closed {
transition-delay: 0.35s;
transform: translate(-100%);
+ [dir="rtl"] & {
+ transform: translate(200%);
+ }
}
.side-drawer-darken {
@@ -317,6 +320,9 @@
.side-drawer-closed {
transform: translate(-100%);
+ [dir="rtl"] & {
+ transform: translate(200%);
+ }
}
.side-drawer-heading {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index af44cdf9..30902d05 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -310,7 +310,7 @@
inline-size: 100%;
display: flex;
flex-wrap: wrap;
- justify-content: left;
+ justify-content: start;
margin-block-start: var(--status-margin, $status-margin);
> * {
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 99d0eec5..fca627e9 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -41,8 +41,7 @@
position: absolute;
inset-inline-end: 0;
inset-inline-start: 0;
- margin-block: 0;
- margin-inline: !important;
+ margin: 0 !important;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 76379047..16038825 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -32,7 +32,7 @@
-
+