From ddebf481e8a764092a334978d04ed0007df64e32 Mon Sep 17 00:00:00 2001
From: Moe <mohammadalsakhawy@gmail.com>
Date: Mon, 15 Apr 2024 11:53:02 +0300
Subject: [PATCH 1/4] feat: Add RTL support to toolbar (#7871)

* feat: Add RTL support to toolbar

* fix: Add logical text-align value for toolbar dropdown

* fix: Correctly calculate available width of toolbar

* fix: Fix weird floating bug with toolbar more buttons
---
 cms/static/cms/js/modules/cms.navigation.js  |  2 +-
 cms/static/cms/sass/components/_reset.scss   |  2 +-
 cms/static/cms/sass/components/_toolbar.scss | 94 +++++++++++++-------
 cms/templates/cms/toolbar/toolbar.html       |  2 +-
 4 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/cms/static/cms/js/modules/cms.navigation.js b/cms/static/cms/js/modules/cms.navigation.js
index b45624c8704..73ecd90f8cb 100644
--- a/cms/static/cms/js/modules/cms.navigation.js
+++ b/cms/static/cms/js/modules/cms.navigation.js
@@ -129,7 +129,7 @@ class Navigation {
      */
     _calculateAvailableWidth() {
         var fullWidth = this.ui.window.width();
-        var reduce = parseInt(this.ui.toolbarRightPart.css('padding-right'), 10) + this.ui.logo.outerWidth(true);
+        var reduce = parseInt(this.ui.toolbarRightPart.css('padding-inline-end'), 10) + this.ui.logo.outerWidth(true);
 
         return fullWidth - reduce;
     }
diff --git a/cms/static/cms/sass/components/_reset.scss b/cms/static/cms/sass/components/_reset.scss
index 5b2a1a1f202..329cbeb3e1b 100644
--- a/cms/static/cms/sass/components/_reset.scss
+++ b/cms/static/cms/sass/components/_reset.scss
@@ -21,7 +21,7 @@
     h3 {
         color: var(--dca-black);
         font: normal #{$font-size-normal}/#{$line-height-normal} Helvetica,Arial,sans-serif;
-        text-align: left;
+        text-align: start;
         text-decoration: none;
         box-sizing: border-box;
         height: auto;
diff --git a/cms/static/cms/sass/components/_toolbar.scss b/cms/static/cms/sass/components/_toolbar.scss
index bb16cf18cf5..d947dbe76eb 100644
--- a/cms/static/cms/sass/components/_toolbar.scss
+++ b/cms/static/cms/sass/components/_toolbar.scss
@@ -26,40 +26,44 @@
         clip: rect(0, auto, 10px, 0);
         background: $toolbar-border !important;
         @at-root .cms-structure-mode-structure & {
-            right: $toolbar-height - 1px;
+            inset-inline-end: $toolbar-height - 1px;
         }
     }
 
     .cms-toolbar-left {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
-        z-index: z(toolbar, left);
+        z-index: z(toolbar, inset-inline-start);
     }
     .cms-toolbar-right {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
-        z-index: z(toolbar, right);
-        padding-right: $toolbar-height;
+        z-index: z(toolbar, inset-inline-end);
+        padding-inline-end:$toolbar-height;
     }
 
     .cms-toolbar-left .cms-toolbar-item {
-        margin-right: $toolbar-left-space;
+        margin-inline-end: $toolbar-left-space;
         &:last-child {
-            margin-right: 0;
+            margin-inline-end: 0;
         }
     }
     .cms-toolbar-right .cms-toolbar-item {
-        margin-right: $toolbar-right-space;
+        margin-inline-end: $toolbar-right-space;
     }
 
     // items
     .cms-toolbar-item {
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
     }
 }
 
+
 @at-root .cms-toolbar-non-sticky {
     position: static !important;
     .cms .cms-toolbar {
@@ -104,9 +108,15 @@
     li {
         position: relative;
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
     }
     li a {
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
         color: $toolbar-menu-item-color;
         padding: $toolbar-menu-item-padding;
         line-height: $toolbar-height;
@@ -123,8 +133,8 @@
         display: none;
         position: absolute;
         top: 50%;
-        right: 7px;
-        margin-top: -(math.div($toolbar-dropdown-item-icon-size, 2));
+        inset-inline-end: 7px;
+        margin-top: math.div(-$toolbar-dropdown-item-icon-size, 2);
         font-size: $toolbar-dropdown-item-icon-size;
         transform: rotate(180deg);
     }
@@ -135,7 +145,7 @@
             display: block;
             position: absolute;
             top: $toolbar-height;
-            left: 0;
+            inset-inline-start: 0;
             min-width: $toolbar-dropdown-min-width;
             padding: $toolbar-dropdown-padding;
             border: 1px solid $white;
@@ -166,7 +176,7 @@
             ul {
                 display: none;
                 top: -(nth($toolbar-dropdown-padding, 1) + 1px);
-                left: 100%;
+                inset-inline-start: 100%;
             }
             > a {
                 cursor: default;
@@ -228,6 +238,12 @@
 
     .cms-toolbar-item {
         float: none;
+        [dir=rtl] & {
+            // a bit weird, but if removed, it will best match
+            // with [dir="rtl"] div.cms .cms-toolbar .cms-toolbar-item
+            // and will float to the right
+            float: none;
+        }
         margin: $toolbar-menu-item-padding !important;
         overflow: hidden;
         margin-top: 5px;
@@ -235,6 +251,9 @@
     }
     .cms-toolbar-item-cms-mode-switcher a {
         float: left !important;
+        [dir=rtl] & {
+            float: right !important;
+        }
         width: 50%;
     }
     .cms-toolbar-item-buttons {
@@ -296,27 +315,24 @@
         border: none;
         box-shadow: none;
         position: relative;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         border-radius: 0;
-        margin-left: 20px;
+        margin-inline-start:20px;
     }
 }
 .cms-toolbar-item-cms-mode-switcher {
     // display: none;
     position: absolute;
-    right: 0;
-    top: 0;
-    position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     width: $toolbar-height;
     height: $toolbar-height;
-    margin-right: 0 !important;
+    margin-inline-end:0 !important;
 
     .cms-btn {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
         border-top: 0 !important;
         border-right: 0 !important;
@@ -328,9 +344,15 @@
         clip: rect(0, $toolbar-height, $toolbar-height, 0px);
         .cms-icon {
             position: absolute;
+<<<<<<< HEAD
             left:  math.div($toolbar-height, 2);
             top:  math.div($toolbar-height, 2);
             margin-left: -10px;
+=======
+            inset-inline-start: math.div($toolbar-height, 2);
+            top: math.div($toolbar-height, 2);
+            margin-inline-start:-10px;
+>>>>>>> 92a1086de (feat: Add RTL support to toolbar (#7871))
             margin-top: -9px;
             font-size: 20px !important;
         }
@@ -396,10 +418,13 @@
         cursor: pointer;
         display: none;
         float: right;
+        [dir=rtl] & {
+            float: left;
+        }
         position: relative;
         width: $messages-close-area-size;
         height: $messages-line-height;
-        text-align: right;
+        text-align: end;
         span {
             font-size: $messages-close-icon-size;
         }
@@ -415,7 +440,7 @@
 //###########################################################
 // #TOOLBAR/elements/logo#
 .cms-toolbar-item-logo {
-    margin-right: 0 !important;
+    margin-inline-end:0 !important;
 
     a {
         @extend .cms-icon;
@@ -425,8 +450,8 @@
         line-height: $toolbar-height;
         height: $toolbar-height;
         transition: color $speed-base;
-        padding-left: $toolbar-left-space;
-        padding-right: $toolbar-left-space;
+        padding-inline-start:$toolbar-left-space;
+        padding-inline-end:$toolbar-left-space;
 
         span {
             display: none;
@@ -446,7 +471,7 @@
         display: inline-block;
         vertical-align: middle;
         line-height: $toolbar-height;
-        padding-left: $toolbar-left-space;
+        padding-inline-start:$toolbar-left-space;
         margin: 0;
         cursor: pointer;
     }
@@ -495,7 +520,7 @@
 
     // overlap with logo when it gets too small
     @media (max-width: $screen-tablet - 280px) {
-        margin-left: -110px;
+        margin-inline-start:-110px;
     }
     // mobile only
     @media (max-width: $screen-tablet) {
@@ -507,12 +532,12 @@
         label {
             position: relative;
             padding: 0;
-            margin-right: -1px;
+            margin-inline-end:-1px;
             margin-bottom: -1px;
         }
         label span {
             position: absolute;
-            left: 5px;
+            inset-inline-start: 5px;
             top: 0;
             z-index: 1;
             color: $gray-light;
@@ -548,6 +573,9 @@
 
     a {
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
         line-height: $toolbar-button-height;
         height: $toolbar-button-height;
         font-size: $toolbar-button-font-size;
@@ -557,7 +585,7 @@
         border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius;
     }
     a:last-child {
-        margin-left: -1px;
+        margin-inline-start:-1px;
         border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0;
     }
     a:only-child {
@@ -571,7 +599,7 @@
 .cms-screenblock {
     position: fixed;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     z-index: z(screenblock);
     color: $screenblock-color;
     text-align: center;
@@ -613,7 +641,7 @@
     position: fixed;
     z-index: 99999999;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 
     width: 100%;
     height: 3px;
@@ -622,7 +650,7 @@
 .cms-loading-peg {
     display: block;
     position: absolute;
-    right: 0px;
+    inset-inline-end: 0px;
     width: 100px;
     height: 100%;
     box-shadow: 0 0 10px #29d, 0 0 5px $color-primary;
diff --git a/cms/templates/cms/toolbar/toolbar.html b/cms/templates/cms/toolbar/toolbar.html
index 22e1e3deb8b..dac191103ca 100644
--- a/cms/templates/cms/toolbar/toolbar.html
+++ b/cms/templates/cms/toolbar/toolbar.html
@@ -4,7 +4,7 @@
      class="cms cms-reset
      {% if not user.is_authenticated %} cms-toolbar-auth{% endif %}
      {% if debug %} cms-toolbar-debug{% endif %}"
-     dir="ltr" data-touch-action="none">
+     data-touch-action="none">
 
     {% block toolbar_top %}
     {% endblock toolbar_top %}

From 67b98d6b5ebfc5979810605ef5c4c15493a9dcd6 Mon Sep 17 00:00:00 2001
From: Moe <mohammadalsakhawy@gmail.com>
Date: Tue, 23 Apr 2024 17:52:39 +0300
Subject: [PATCH 2/4] feat: Add RTL support to modal header and related
 components (#7863)

---
 .../cms/sass/components/_clipboard.scss       |  2 +-
 cms/static/cms/sass/components/_modal.scss    | 25 +++++----
 .../cms/sass/components/_pluginpicker.scss    |  4 +-
 .../cms/sass/components/_structureboard.scss  | 53 +++++++++----------
 cms/static/cms/sass/components/_subnav.scss   | 18 +++----
 .../cms/toolbar/toolbar_with_structure.html   |  6 ++-
 6 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/cms/static/cms/sass/components/_clipboard.scss b/cms/static/cms/sass/components/_clipboard.scss
index bbe14914d6b..fed7499634f 100644
--- a/cms/static/cms/sass/components/_clipboard.scss
+++ b/cms/static/cms/sass/components/_clipboard.scss
@@ -32,7 +32,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        margin-right: 40px;
+        margin-inline-end: 40px;
     }
 
     .cms-plugins {
diff --git a/cms/static/cms/sass/components/_modal.scss b/cms/static/cms/sass/components/_modal.scss
index 18054f8b551..23ba23eba08 100644
--- a/cms/static/cms/sass/components/_modal.scss
+++ b/cms/static/cms/sass/components/_modal.scss
@@ -53,13 +53,13 @@
         .cms-modal-title {
             // set correct cursor when maximized #3111
             cursor: default;
-            padding-right: $modal-header-button-area-size * 3;
+            padding-inline-end: $modal-header-button-area-size * 3;
         }
         .cms-modal-title-suffix {
             display: none;
         }
         .cms-modal-minimize {
-            right: $modal-header-button-area-size + $padding-base;
+            inset-inline-end: $modal-header-button-area-size + $padding-base;
         }
     }
 }
@@ -140,10 +140,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: $modal-header-button-area-size * 3 + $padding-normal;
+    margin-inline-end: $modal-header-button-area-size * 3 + $padding-normal;
     .cms-modal-title-suffix {
         font-weight: normal;
-        padding-left: $padding-normal;
+        padding-inline-start: $padding-normal;
     }
 }
 
@@ -153,8 +153,8 @@
     display: block;
     position: absolute;
     top: 50%;
-    margin-top:  math.div(-$modal-header-button-area-size, 2);
-    right: $padding-normal;
+    margin-top: math.div(-$modal-header-button-area-size, 2);
+    inset-inline-end: $padding-normal;
     color: $gray-light;
     text-align: center;
     width: $modal-header-button-area-size;
@@ -169,7 +169,7 @@
     }
 }
 .cms-modal-minimize {
-    right: 2 * $modal-header-button-area-size + $padding-normal;
+    inset-inline-end: 2 * $modal-header-button-area-size + $padding-normal;
     .cms-modal-minimized & {
         @include icon(plus);
         color: $color-primary;
@@ -180,7 +180,7 @@
     }
 }
 .cms-modal-maximize {
-    right: $modal-header-button-area-size + $padding-normal;
+    inset-inline-end: $modal-header-button-area-size + $padding-normal;
     // ensure maximize element is hidden #3111
     .cms-modal-minimized & {
         display: none !important;
@@ -249,13 +249,18 @@
     right: 0;
     left: 0;
     z-index: z(modal, buttons);
-    padding: 0 $modal-resize-size 0 $padding-normal;
+    padding-block: 0;
+    padding-inline: $padding-normal $modal-resize-size;
 }
 .cms-modal-item-buttons {
     $margin:  math.div($toolbar-height - $toolbar-button-height, 2);
     @extend .cms-toolbar-item-buttons;
     float: right;
-    margin-left: $margin;
+    margin-inline-start: $margin;
+
+    .cancel-link {
+        display: none;
+    }
 }
 .cms-modal-item-buttons-left {
     float: left;
diff --git a/cms/static/cms/sass/components/_pluginpicker.scss b/cms/static/cms/sass/components/_pluginpicker.scss
index 912bfb17571..8217dfc41a2 100644
--- a/cms/static/cms/sass/components/_pluginpicker.scss
+++ b/cms/static/cms/sass/components/_pluginpicker.scss
@@ -20,7 +20,7 @@
         white-space: nowrap;
         font-size: $submenu-item-font-size;
         line-height: $submenu-item-height + 6px;
-        text-align: left;
+        text-align: start;
         min-height: $submenu-item-height + 6px;
         padding: 0 $submenu-item-padding-horizontal;
     }
@@ -88,7 +88,7 @@
     z-index: z(structure, content, empty, addplugin);
     color: $color-primary;
     line-height: 44px;
-    padding-left: 20px;
+    padding-inline-start: 20px;
     border: 2px solid $color-primary;
     border-radius: $border-radius-base;
     background-color: $white;
diff --git a/cms/static/cms/sass/components/_structureboard.scss b/cms/static/cms/sass/components/_structureboard.scss
index 6b9c31fd65d..7a4ede81090 100644
--- a/cms/static/cms/sass/components/_structureboard.scss
+++ b/cms/static/cms/sass/components/_structureboard.scss
@@ -107,7 +107,7 @@
         left: 0;
         font-size: $font-size-normal;
         line-height: $line-height-normal;
-        padding-left: $border-radius-normal + 2px;
+        padding-inline-start: $border-radius-normal + 2px;
         border-radius: $border-radius-base;
 
         .cms-dragbar-title {
@@ -121,16 +121,16 @@
             font-weight: bold;
             line-height: $structure-dragbar-height;
             height: $structure-dragbar-height;
-            margin-right: $submenu-icon-area-size * 2 + 25px;
+            margin-inline-end: $submenu-icon-area-size * 2 + 25px;
         }
         .cms-dragbar-toggler {
             position: absolute;
-            right: 0;
+            inset-inline-end: 0;
             background-image: linear-gradient(to right, rgba($structure-bgcolor, 0) 0, $structure-bgcolor 40px);
-            padding-left: 50px;
+            padding-inline-start: 50px;
             font-weight: normal;
             text-transform: uppercase;
-            margin-left: 30px;
+            margin-inline-start: 30px;
             cursor: pointer;
             a {
                 color: $btn-default-color !important;
@@ -185,7 +185,7 @@
         display: none !important;
     }
     .cms-draggables .cms-draggables {
-        padding-left: $structure-draggable-inner-padding;
+        padding-inline-start: $structure-draggable-inner-padding;
     }
     .cms-dragarea-empty .cms-draggables-root {
         position: relative;
@@ -234,11 +234,11 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            margin-right: $submenu-icon-area-size * 3 + $submenu-right * 4;
+            margin-inline-end: $submenu-icon-area-size * 3 + $submenu-right * 4;
             padding: $structure-dragarea-padding $structure-dragarea-padding-horizontal;
         }
         .cms-dragitem-collapsable .cms-dragitem-text {
-            padding-left: $structure-dragitem-icon-space;
+            padding-inline-start: $structure-dragitem-icon-space;
         }
     }
 
@@ -288,7 +288,7 @@
             z-index: z(structure, content, empty, empty);
             color: $gray;
             line-height: 44px;
-            padding-left: 20px;
+            padding-inline-start: 20px;
         }
         > .cms-draggables-root > .cms-add-plugin-placeholder {
             position: absolute;
@@ -323,14 +323,14 @@
                 display: none;
             }
             .cms-dragitem-text {
-                padding-left: $structure-dragarea-padding-horizontal;
+                padding-inline-start: $structure-dragarea-padding-horizontal;
             }
         }
         .cms-dragitem-text {
-            margin-right: 0;
+            margin-inline-end: 0;
         }
         &.cms-draggable-from-clipboard .cms-dragitem-text {
-            margin-right: $padding-large;
+            margin-inline-end: $padding-large;
         }
         &.cms-draggable-disabled > .cms-draggable {
             display: none !important;
@@ -364,11 +364,11 @@
             @extend %icon;
             position: absolute;
             top: 50%;
-            left: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px;
+            inset-inline-start: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px;
             color: $submenu-icon-color;
             font-size: $structure-dragitem-icon-size;
             margin-top: math.div(-$structure-dragitem-icon-size, 2);
-            margin-left: $structure-dragarea-padding-horizontal - 10px;
+            margin-inline-start: $structure-dragarea-padding-horizontal - 10px;
             cursor: pointer;
             transform: rotate(180deg);
         }
@@ -426,8 +426,8 @@
         }
 
         .cms-draggable {
-            margin-left: $structure-draggable-inner-padding !important;
-            margin-left: 15px;
+            margin-inline-start: $structure-draggable-inner-padding !important;
+            margin-inline-start: 15px;
             .cms-dragitem {
                 background-image: none;
                 &:hover {
@@ -456,7 +456,7 @@
             color: $submenu-icon-color;
             font-size: $submenu-icon-size;
             margin-top: -(math.div($submenu-icon-size, 2));
-            margin-left: -(math.div($submenu-icon-size, 2));
+            margin-inline-start: -(math.div($submenu-icon-size, 2));
         }
     }
 
@@ -468,19 +468,18 @@
 
     &.cms-structure-condensed {
         width: 416px;
-        right: 0;
+        left: 0;
         box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
         .cms-structure-content {
-            padding-left: 15px;
-            padding-right: 15px;
+            padding-inline: 15px;
             overflow-x: hidden;
         }
         .cms-draggables .cms-draggables {
-            padding-left: 15px;
+            padding-inline-start: 15px;
         }
         .cms-draggable-disabled {
             .cms-draggable {
-                margin-left: 15px !important;
+                margin-inline-start: 15px !important;
             }
         }
 
@@ -491,8 +490,8 @@
         .cms-dragitem-text {
             padding-top: 8px;
             padding-bottom: 8px;
-            margin-right: 110px;
-            padding-right: 5px;
+            margin-inline-end: 110px;
+            padding-inline-end: 5px;
         }
         .cms-dragarea-empty .cms-draggables-root {
             min-height: 43px;
@@ -512,10 +511,10 @@
             margin-top: -16px;
         }
         .cms-submenu-add {
-            right: 39px;
+            inset-inline-end: 39px;
         }
         .cms-submenu-edit {
-            right: 39px + 32px + 4px;
+            inset-inline-end: 39px + 32px + 4px;
         }
         .cms-submenu-dropdown-settings .cms-submenu-item a {
             &,
@@ -529,7 +528,7 @@
             padding: 0;
         }
         .cms-dragbar-title {
-            margin-right: $submenu-icon-area-size * 2 + 10px;
+            margin-inline-end: $submenu-icon-area-size * 2 + 10px;
         }
         .cms-draggable-stack {
             height: $structure-dragitem-fullheight - 6px !important;
diff --git a/cms/static/cms/sass/components/_subnav.scss b/cms/static/cms/sass/components/_subnav.scss
index 056cd12d69c..b6bee81400d 100644
--- a/cms/static/cms/sass/components/_subnav.scss
+++ b/cms/static/cms/sass/components/_subnav.scss
@@ -7,7 +7,7 @@
     @include icon(menu);
     display: block;
     position: absolute;
-    right: $submenu-right;
+    inset-inline-end: $submenu-right;
     width: $submenu-icon-area-size;
     height: $submenu-icon-area-size;
     cursor: pointer;
@@ -46,11 +46,11 @@
 
 .cms-submenu-edit {
     @include icon(pencil);
-    right: $submenu-right * 3 + $submenu-icon-area-size * 2;
+    inset-inline-end: $submenu-right * 3 + $submenu-icon-area-size * 2;
 }
 .cms-submenu-add {
     @include icon(plus);
-    right: $submenu-right * 2 + $submenu-icon-area-size;
+    inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size;
 }
 .cms-submenu-edit,
 .cms-submenu-add {
@@ -92,7 +92,7 @@
     background: $submenu-dropdown-bgcolor;
     border-radius: $border-radius-normal;
     box-shadow: $dropdown-shadow;
-    right: $submenu-right * 2 + $submenu-icon-area-size;
+    inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size;
     transform: translateZ(0);
 
     .cms-submenu-item {
@@ -100,11 +100,11 @@
             position: relative;
             display: block;
             font-size: $submenu-item-font-size;
-            text-align: left;
+            text-align: start;
             padding: 0 $submenu-item-padding-horizontal;
             line-height: $dropdown-item-height;
             min-height: $dropdown-item-height;
-            padding-left: $dropdown-item-icon-space;
+            padding-inline-start: $dropdown-item-icon-space;
             color: $submenu-item-color;
             &:hover,
             &:focus {
@@ -116,7 +116,7 @@
                 &:before {
                     @extend %icon;
                     position: absolute;
-                    left: $dropdown-item-icon-position;
+                    inset-inline-start: $dropdown-item-icon-position;
                     top: 0;
                     height: $dropdown-item-height;
                     line-height: $dropdown-item-height
@@ -179,10 +179,10 @@
         z-index: z(below);
         position: absolute;
         content: '';
-        left: 100%;
+        inset-inline-start: 100%;
         width: $dropdown-arrow-side;
         height: $dropdown-arrow-side;
-        margin-left: -(math.div($dropdown-arrow-side, 2));
+        margin-inline-start: math.div(-$dropdown-arrow-side, 2);
         transform: rotate(45deg);
         background-color: $submenu-dropdown-bgcolor;
         box-shadow: $dropdown-shadow;
diff --git a/cms/templates/cms/toolbar/toolbar_with_structure.html b/cms/templates/cms/toolbar/toolbar_with_structure.html
index d6edff778b2..7103c966de8 100644
--- a/cms/templates/cms/toolbar/toolbar_with_structure.html
+++ b/cms/templates/cms/toolbar/toolbar_with_structure.html
@@ -34,7 +34,11 @@
         {% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %}
     {% endif %}
 
-    <div class="cms-modal" tabindex="-1" data-touch-action="none">
+    <div 
+        class="cms-modal" 
+        tabindex="-1" 
+        data-touch-action="none"
+    >
         <div class="cms-modal-head" data-touch-action="none">
             <span class="cms-modal-title" data-touch-action="none">
                 <span class="cms-modal-title-prefix"></span>

From 8486a6484b469364d5be52b65b9229d18f164457 Mon Sep 17 00:00:00 2001
From: Fabian Braun <fsbraun@gmx.de>
Date: Fri, 26 Apr 2024 11:45:05 +0200
Subject: [PATCH 3/4] fix: structure board on the right for ltr

---
 cms/static/cms/sass/components/_structureboard.scss | 8 +++++++-
 cms/static/cms/sass/components/_toolbar.scss        | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/cms/static/cms/sass/components/_structureboard.scss b/cms/static/cms/sass/components/_structureboard.scss
index 7a4ede81090..cf3f6b0a2aa 100644
--- a/cms/static/cms/sass/components/_structureboard.scss
+++ b/cms/static/cms/sass/components/_structureboard.scss
@@ -371,6 +371,9 @@
             margin-inline-start: $structure-dragarea-padding-horizontal - 10px;
             cursor: pointer;
             transform: rotate(180deg);
+            [dir="rtl"] & {
+                transform: rotate(0deg);
+            }
         }
         .cms-dragitem-text {
             cursor: pointer;
@@ -378,6 +381,9 @@
     }
     .cms-dragitem-expanded:before {
         transform: rotate(-90deg);
+        [dir="rtl"] & {
+            transform: rotate(-90deg);
+        }
     }
     // #DRAGGABLES/states#
 
@@ -468,7 +474,7 @@
 
     &.cms-structure-condensed {
         width: 416px;
-        left: 0;
+        inset-inline-end: 0;
         box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
         .cms-structure-content {
             padding-inline: 15px;
diff --git a/cms/static/cms/sass/components/_toolbar.scss b/cms/static/cms/sass/components/_toolbar.scss
index d947dbe76eb..977224546cc 100644
--- a/cms/static/cms/sass/components/_toolbar.scss
+++ b/cms/static/cms/sass/components/_toolbar.scss
@@ -185,6 +185,10 @@
                 display: block;
                 .cms-icon {
                     display: block;
+                    [dir="rtl"] & {
+                        // undo arrow rotation for RTL
+                        transform: rotate(0deg);
+                    }
                 }
 
             }

From 8674687742081f7a2edcb3f6e990e8e09c31793f Mon Sep 17 00:00:00 2001
From: Fabian Braun <fsbraun@gmx.de>
Date: Thu, 2 May 2024 12:48:35 +0200
Subject: [PATCH 4/4] Remove conflict

---
 cms/static/cms/sass/components/_toolbar.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/cms/static/cms/sass/components/_toolbar.scss b/cms/static/cms/sass/components/_toolbar.scss
index 977224546cc..962ee45d6db 100644
--- a/cms/static/cms/sass/components/_toolbar.scss
+++ b/cms/static/cms/sass/components/_toolbar.scss
@@ -348,15 +348,9 @@
         clip: rect(0, $toolbar-height, $toolbar-height, 0px);
         .cms-icon {
             position: absolute;
-<<<<<<< HEAD
-            left:  math.div($toolbar-height, 2);
-            top:  math.div($toolbar-height, 2);
-            margin-left: -10px;
-=======
             inset-inline-start: math.div($toolbar-height, 2);
             top: math.div($toolbar-height, 2);
             margin-inline-start:-10px;
->>>>>>> 92a1086de (feat: Add RTL support to toolbar (#7871))
             margin-top: -9px;
             font-size: 20px !important;
         }