From add0bed3ca5f4cff027410beac6851261b25c9f6 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Thu, 29 Feb 2024 16:46:10 +0100
Subject: [PATCH] :bug: Fix ellipsis in library color names

---
 .../ui/workspace/sidebar/assets/colors.cljs   |  6 +--
 .../ui/workspace/sidebar/assets/colors.scss   | 37 +++++++++++--------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
index 333e4e2fa..5dc91dba6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
@@ -224,10 +224,10 @@
               :on-double-click rename-color-clicked}
 
         (if (= (:name color) default-name)
-          [:span  {:class (stl/css :default-name-only)} default-name]
+          [:span  {:class (stl/css :default-name)} default-name]
           [:*
-           [:span  {:class (stl/css :name)} (:name color)]
-           [:span  {:class (stl/css :default-name)} default-name]])])
+           (:name color)
+           [:span  {:class (stl/css :default-name :default-name-with-color)} default-name]])])
 
      (when local?
        [:& cmm/assets-context-menu
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index daca6b778..73df84f7f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
@@ -6,10 +6,15 @@
 
 @import "refactor/common-refactor.scss";
 
+// TODO: we should be using subgrid in the common "assets component" to avoid
+// using this SCSS variable here (we cannot use a CSS var in this CSS module because
+// the elements are not part of the same cascade).
+$assets-button-width: $s-28;
+
 .assets-btn {
   @extend .button-tertiary;
   height: $s-32;
-  width: $s-28;
+  width: $assets-button-width;
   padding: 0;
   border-radius: $br-8;
   svg {
@@ -28,10 +33,12 @@
 
 .asset-list-item {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr #{$assets-button-width};
   align-items: center;
   height: $s-32;
   padding: $s-8;
+  padding-inline-end: 0;
   margin-bottom: $s-4;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
@@ -63,25 +70,23 @@
   @include flexCenter;
   height: 100%;
   justify-content: flex-start;
-  margin-right: $s-4;
+  margin-inline-end: $s-4;
 }
 
 .name-block {
   @include bodySmallTypography;
-  display: grid;
-  grid-template-columns: auto 1fr;
+  @include textEllipsis;
   margin: 0;
-  overflow: hidden;
-  .default-name-only,
-  .name {
-    color: var(--assets-item-name-foreground-color);
-    margin-right: $s-6;
-    @include textEllipsis;
-  }
-  .default-name {
-    min-width: 0;
-    color: var(--assets-item-name-foreground-color-rest);
-  }
+  color: var(--assets-item-name-foreground-color);
+}
+
+.default-name {
+  margin-inline-start: $s-4;
+  color: var(--assets-item-name-foreground-color-rest);
+}
+
+.default-name-with-color {
+  margin-left: $s-6;
 }
 
 .element-name {