From 2f27a78bc05cac0236a88d66c17688f7d0184ba0 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Fri, 17 Oct 2025 10:39:41 +0200
Subject: [PATCH] :bug: Fix color row erros from review (#7516)

* :bug: Fix text Ellipsis on token color row

* :bug: Fix show token only on first stroke

* :bug: Fix detach broken token
---
 common/src/app/common/files/tokens.cljc                   | 2 +-
 .../main/ui/workspace/sidebar/options/rows/color_row.cljs | 6 ++++--
 .../main/ui/workspace/sidebar/options/rows/color_row.scss | 8 ++++++--
 .../ui/workspace/sidebar/options/rows/stroke_row.cljs     | 4 +++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/common/src/app/common/files/tokens.cljc b/common/src/app/common/files/tokens.cljc
index 3a0a632a7f..811eb598b5 100644
--- a/common/src/app/common/files/tokens.cljc
+++ b/common/src/app/common/files/tokens.cljc
@@ -44,7 +44,7 @@
   (let [attr? (set attributes)]
     (->> (remove (fn [[k v]]
                    (and (attr? k)
-                        (= v (token-identifier token))))
+                        (= v (or (token-identifier token) token))))
                  applied-tokens)
          (into {}))))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index bfcf309d3b..f416763497 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -83,8 +83,10 @@
 
         on-detach-token
         (mf/use-fn
-         (mf/deps detach-token token)
-         #(detach-token token))
+         (mf/deps detach-token token color-token)
+         (fn []
+           (let [token (or token color-token)]
+             (detach-token token))))
 
         has-errors (some? (:errors token))
         token-name (:name token)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index 6ecce7425c..c28ed51fed 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -299,8 +299,12 @@
   @include textEllipsis;
   color: var(--token-color-wrapper-foreground-color);
   block-size: $sz-32;
-  display: flex;
-  align-items: center;
+  line-height: $sz-32;
+}
+
+.token-tooltip {
+  min-width: 0;
+  inline-size: inherit;
 }
 
 .token-name-tooltip {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index 4fc7e4d9de..55eb1c3d9e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -192,7 +192,9 @@
                      :on-detach on-color-detach
                      :on-remove on-remove
                      :disable-drag disable-drag
-                     :applied-token stroke-color-token
+                     :applied-token (if (= index 0)
+                                      stroke-color-token
+                                      nil)
                      :on-detach-token on-detach-token-color
                      :on-token-change on-token-change
                      :on-focus on-focus