From 4237ef572e6cf4c139131540fd99ea36d07ec046 Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Mon, 18 Aug 2025 21:36:56 +0200
Subject: [PATCH] :bug: Fix use ellipsis when property names are too long
 (#7135)

---
 .../sidebar/options/menus/component.cljs       |  6 ++++--
 .../sidebar/options/menus/component.scss       | 18 ++++++++++--------
 2 files changed, 14 insertions(+), 10 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 dcf11b1dba..c559743f70 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
@@ -464,8 +464,10 @@
       (for [[pos prop] (map vector (range) properties)]
         [:div {:key (str (:id shape) pos) :class (stl/css :variant-property-container)}
          [:*
-          [:span {:class (stl/css :variant-property-name)}
-           (:name prop)]
+          [:div {:class (stl/css :variant-property-name-wrapper-copy)
+                 :title (:name prop)}
+           [:span {:class (stl/css :variant-property-name)}
+            (:name prop)]]
           [:> select* {:default-selected (:value prop)
                        :options (get-options (:name prop))
                        :empty-to-end true
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 9f63ad592d..2a87597a69 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
@@ -746,18 +746,13 @@
   padding-right: var(--sp-xxs);
 }
 
-.variant-property-name {
-  color: var(--color-foreground-primary);
-  height: var(--sp-xxxl);
-  width: $s-104;
-
+.variant-property-name-wrapper-copy {
   display: flex;
   align-items: center;
   justify-content: center;
 
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  height: var(--sp-xxxl);
+  width: $s-104;
 }
 
 .variant-property-name-wrapper {
@@ -766,6 +761,13 @@
   width: $s-104;
 }
 
+.variant-property-name {
+  color: var(--color-foreground-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .variant-warning-wrapper {
   @include bodySmallTypography;
   border: 1px solid var(--color-background-quaternary);