diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1b0fa2bea..dba34ad9f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -149,7 +149,7 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #main-menu .menu-children li a:hover {color: var(--oc-white); background-color: var(--oc-blue-7);}
 
 #main-menu .tabs-buttons {
-  right: 6px;
+  inset-inline-end: 6px;
   background-color: transparent;
   border-bottom-color: transparent;
 }
@@ -1533,7 +1533,15 @@ p.progress-info {clear: left; font-size: 86%; margin-top:-4px; color:var(--oc-gr
 
 #content .tabs ul li a.selected:hover {background-color: var(--oc-white);}
 
-div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid var(--oc-gray-5); }
+div.tabs-buttons {
+  position: absolute;
+  inset-inline-end: 0;
+  width: 54px;
+  height: 24px;
+  background: white;
+  bottom: 0;
+  border-bottom: 1px solid var(--oc-gray-5);
+}
 
 button.tab-left, button.tab-right {
   font-size: 0.9em;
@@ -1558,12 +1566,12 @@ button.tab-left svg.icon-svg, button.tab-right svg.icon-svg {
 }
 
 button.tab-left {
-  right: 28px;
+  inset-inline-end: 28px;
   border-top-left-radius:3px;
 }
 
 button.tab-right {
-  right: 4px;
+  inset-inline-end: 4px;
   border-top-right-radius:3px;
 }
 
diff --git a/app/assets/stylesheets/rtl.css b/app/assets/stylesheets/rtl.css
index 1a8521382..c4bfc8efc 100644
--- a/app/assets/stylesheets/rtl.css
+++ b/app/assets/stylesheets/rtl.css
@@ -177,16 +177,6 @@ p.progress-info {clear:right;}
   margin-right:0px; margin-left:4px;
 }
 
-div.tabs-buttons {right:auto; left:0;}
-
-button.tab-left {
-  right:auto; left:20px;
-}
-
-button.tab-right {
-  right:auto; left:20px;
-}
-
 /***** Diff *****/
 
 /***** My page layout *****/
diff --git a/app/views/common/_tabs.html.erb b/app/views/common/_tabs.html.erb
index 0190e5e6b..3f3dd278e 100644
--- a/app/views/common/_tabs.html.erb
+++ b/app/views/common/_tabs.html.erb
@@ -13,10 +13,10 @@
   </ul>
   <div class="tabs-buttons" style="display:none;">
     <button class="tab-left icon-only" type="button" onclick="moveTabLeft(this);">
-      <%= sprite_icon "angle-left" %>
+      <%= sprite_icon("angle-left", rtl: true) %>
     </button>
     <button class="tab-right icon-only" type="button" onclick="moveTabRight(this);">
-      <%= sprite_icon "angle-right" %>
+      <%= sprite_icon("angle-right", rtl: true) %>
     </button>
   </div>
 </div>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index afb3568b3..d0b46eb4b 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -94,10 +94,10 @@
         <%= render_main_menu(@project) %>
         <div class="tabs-buttons" style="display:none;">
             <button class="tab-left icon-only" onclick="moveTabLeft(this); return false;">
-              <%= sprite_icon "angle-left" %>
+              <%= sprite_icon("angle-left", rtl: true) %>
             </button>
             <button class="tab-right icon-only" onclick="moveTabRight(this); return false;">
-              <%= sprite_icon "angle-right" %>
+              <%= sprite_icon("angle-right", rtl: true) %>
             </button>
         </div>
     </div>