🐛 Fix typography asset name color and ellipsis (#9784)

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 {

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"

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);