🐛 Fix color names in palette being clipped and not breaking at dot characters

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -44,6 +44,10 @@
         (some? image)
         (tr "media.image")))))
 
+(defn- breakable-color-title
+  [title]
+  (str/replace title "." ".\u200B"))
+
 (mf/defc color-bullet
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
@@ -112,4 +116,4 @@
               :title name
               :on-click on-click
               :on-double-click on-double-click}
-       (or name color (uc/gradient-type->string (:type gradient)))])))
+       (breakable-color-title (or name color (uc/gradient-type->string (:type gradient))))])))

frontend/src/app/main/ui/components/color_bullet.scss

@@ -86,6 +86,7 @@
 .big-text {
   @include inspectValue;
   @include twoLineTextEllipsis;
+  line-height: 1;
   color: var(--palette-text-color);
   height: $s-28;
   text-align: center;