From b258b05fb26918ce65e7dd37d12f089ba5fc8c3b Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 2 Apr 2024 11:31:13 +0200
Subject: [PATCH] :bug: Fix problem with rtl

---
 .../main/ui/workspace/sidebar/options/menus/component.cljs | 7 ++++---
 .../main/ui/workspace/sidebar/options/menus/component.scss | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index d5170a8b5..570b25faf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -616,9 +616,10 @@
 
             [:div {:class (stl/css :name-wrapper)}
              [:div {:class (stl/css :component-name)}
-              (if multi
-                (tr "settings.multiple")
-                (cfh/last-path shape-name))]
+              [:span {:class (stl/css :component-name-inside)}
+               (if multi
+                 (tr "settings.multiple")
+                 (cfh/last-path shape-name))]]
 
              (when (and can-swap? (not multi))
                [:div {:class (stl/css :component-parent-name)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index c36756069..d024187a7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -56,7 +56,6 @@
     padding-right: 0.5rem;
     .component-name-wrapper {
       width: 100%;
-
       border-radius: $br-8;
     }
   }
@@ -93,6 +92,7 @@
   min-height: $s-32;
   padding: $s-8 0 $s-8 $s-2;
   border-radius: $br-8 0 0 $br-8;
+  overflow: hidden;
 }
 
 .component-name {
@@ -103,6 +103,11 @@
   min-height: $s-16;
 }
 
+.component-name-inside {
+  direction: ltr;
+  unicode-bidi: bidi-override;
+}
+
 .component-parent-name {
   @include bodySmallTypography;
   @include textEllipsis;