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