🐛 Fix use ellipsis when property names are too long (#7135)

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

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);