diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 0c857cc3de..1a39f1750b 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/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))))])))
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index 3a8e0e202a..cdfcb6c075 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/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;