Merge pull request #5625 from penpot/eva-fix-long-token-names

common/src/app/common/files/helpers.cljc

@@ -640,13 +640,15 @@
   (let [path-split (split-path path)]
     (merge-path-item (first path-split) name)))
 
-(defn split-string-half
-  "Split string in two halfs"
+
+(defn split-by-last-period
+  "Splits a string into two parts:
+   the text before and including the last period, 
+   and the text after the last period."
   [s]
-  (let [len (count s)
-        mid (quot len 2)]
-    [(subs s 0 mid)
-     (subs s mid)]))
+  (if-let [last-period (str/last-index-of s ".")]
+    [(subs s 0 (inc last-period)) (subs s (inc last-period))]
+    [s ""]))
 
 (defn get-frame-objects
   "Retrieves a new objects map only with the objects under frame-id (with frame-id)"

frontend/src/app/main/ui/workspace/tokens/token_pill.cljs

@@ -21,7 +21,7 @@
         color (when (seq (ctob/find-token-value-references value))
                 (wtt/resolved-value-hex theme-token))
         contains-path? (str/includes? name ".")
-        splitted-name (cfh/split-string-half name)
+        splitted-name (cfh/split-by-last-period name)
         color (or color (wtt/resolved-value-hex token))
         on-click
         (mf/use-callback

frontend/src/app/main/ui/workspace/tokens/token_pill.scss

@@ -62,22 +62,22 @@
 
 .divided-name-wrapper {
   height: $s-16;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .first-name-wrapper {
-  display: inline-block;
-  max-width: 50%;
   overflow: hidden;
-  white-space: pre;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
 .last-name-wrapper {
-  display: inline-block;
-  max-width: 50%;
-  overflow: hidden;
-  white-space: pre;
-  direction: rtl;
+  flex-shrink: 0;
+  margin-left: 4px;
 }
 
 .token-pill-applied {