From 841ad69d26f4d78afbf69d9d56429d32aff27caa Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 25 May 2026 07:48:49 +0200
Subject: [PATCH] :bug: Fix typography asset name color and ellipsis (#9784)

---
 .../sidebar/assets/typographies.scss          |  1 -
 .../sidebar/options/menus/typography.cljs     | 16 ++++----
 .../sidebar/options/menus/typography.scss     | 39 +++++++++----------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
index d44f702823..d00eeb20f9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
@@ -27,7 +27,6 @@
   margin-bottom: deprecated.$s-4;
   border-radius: deprecated.$br-8;
   background-color: var(--assets-item-background-color);
-  max-inline-size: var(--options-width);
 }
 
 .dragging {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
index 6b4ded0961..74a7299607 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -686,13 +686,15 @@
                    :font-style (:font-style typography)}}
           (tr "workspace.assets.typography.sample")]
 
-         [:div {:class (stl/css :typography-name)
-                :title (:name typography)} (:name typography)]
-
-         (when-not name-only?
-           [:div {:class (stl/css :typography-font)
-                  :title (:name font-data)}
-            (:name font-data)])])
+         [:div {:class (stl/css :name-block)
+                :title (if name-only?
+                         (:name typography)
+                         (dm/str (:name typography) " (" (:name font-data) ")"))}
+          (if name-only?
+            [:span  {:class (stl/css :typography-name)} (:name typography)]
+            [:*
+             (:name typography)
+             [:span  {:class (stl/css :typography-name :typography-font)} (:name font-data)]])]])
       [:div {:class (stl/css :element-set-actions)}
        (when ^boolean on-detach
          [:> icon-button* {:variant "action"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 5e630aea3d..75e265af95 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -61,7 +61,7 @@
   flex: 1;
   block-size: 100%;
   inline-size: 100%;
-  padding: 0 var(--sp-m);
+  padding-inline-start: var(--sp-m);
 
   &.is-selectable {
     cursor: pointer;
@@ -77,24 +77,10 @@
   color: var(--color-foreground-secondary);
 }
 
-.typography-name,
-.typography-font {
-  @include t.use-typography("body-small");
-  @include text-ellipsis;
-
-  display: block;
-  align-self: center;
-  margin-inline-start: px2rem(6);
-}
-
 .typography-name {
   color: var(--color-foreground-primary);
 }
 
-.typography-font {
-  color: var(--color-foreground-secondary);
-}
-
 .font-name-wrapper {
   --font-name-wrapper-foreground-color: var(--color-foreground-primary);
   --font-name-wrapper-background-color: var(--color-background-tertiary);
@@ -186,19 +172,30 @@
   color: var(--color-foreground-primary);
 }
 
-.typography-name,
-.typography-font {
+.name-block {
   @include t.use-typography("body-small");
   @include text-ellipsis;
 
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-inline-start: px2rem(6);
+  margin: 0;
+  min-inline-size: px2rem(6);
+  padding: 8px 0 8px 6px;
+  max-width: 100%;
+  color: var(--color-foreground-primary);
+}
+
+.typography-name,
+.typography-font {
+  @include t.use-typography("body-small");
+
   min-inline-size: 0;
   color: var(--color-foreground-primary);
 }
 
+.typography-font {
+  margin-inline-start: px2rem(6);
+  color: var(--color-foreground-secondary);
+}
+
 .info-row {
   --calculated-width: calc(var(--right-sidebar-width) - $sz-48);