🐛 Fix extra long names on typography assets

CHANGES.md

@@ -6,12 +6,13 @@
 
 - Fix zooming while color picker breaks UI [GH #3214](https://github.com/penpot/penpot/issues/3214)
 - Fix problem with layout not reflowing on shape deletion [Taiga #5289](https://tree.taiga.io/project/penpot/issue/5289)
+- Fix extra long typography names on assets and palette [Taiga #5199](https://tree.taiga.io/project/penpot/issue/5199)
+- Fix background-color property on inspect code [Taiga #5300](https://tree.taiga.io/project/penpot/issue/5300)
 
 ## 1.18.3
 
 ### :bug: Bugs fixed
 
-- Fix background-color property on inspect code [Taiga #5300](https://tree.taiga.io/project/penpot/issue/5300)
 - Fix problem with rulers not placing correctly [Taiga #5093](https://tree.taiga.io/project/penpot/issue/5093)
 - Fix page context menu [Taiga #5145](https://tree.taiga.io/project/penpot/issue/5145)
 - Fix project file count [Taiga #5148](https://tree.taiga.io/project/penpot/issue/5148)

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -434,6 +434,14 @@
       cursor: pointer;
       position: relative;
 
+      .name-block {
+        color: $color-gray-20;
+        width: calc(100% - 24px - #{$size-2});
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
       & span {
         margin-left: $size-1;
         color: $color-gray-30;

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1095,7 +1095,10 @@
     flex-grow: 1;
     font-size: $fs11;
     margin-top: 4px;
+    max-width: calc(var(--width, 256px) - 100px);
+    overflow: hidden;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .element-set-actions-button svg {

frontend/resources/styles/main/partials/text-palette.scss

@@ -9,6 +9,10 @@
 
   & .typography-name {
     color: $color-white;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   & .typography-font,

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -1280,7 +1280,8 @@
          :auto-focus true
          :default-value (cph/merge-path-item (:path color) (:name color))}]
 
-       [:div.name-block {:on-double-click rename-color-clicked}
+       [:div.name-block {:title (:name color)
+                         :on-double-click rename-color-clicked}
         (:name color)
         (when-not (= (:name color) default-name)
           [:span default-name])])

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -499,7 +499,7 @@
                  :font-weight (:font-weight typography)
                  :font-style (:font-style typography)}}
         (tr "workspace.assets.typography.sample")]
-       [:div.typography-name (:name typography)]]
+       [:div.typography-name {:title (:name typography)}(:name typography)]]
       [:div.element-set-actions
        (when on-detach
          [:div.element-set-actions-button
@@ -517,7 +517,7 @@
       (if (not editable?)
         [:div.element-set-content.typography-read-only-data
          [:div.row-flex.typography-name
-          [:span (:name typography)]]
+          [:span {:title (:name typography)} (:name typography)]]
 
          [:div.row-flex
           [:span.label (tr "workspace.assets.typography.font-id")]

frontend/src/app/main/ui/workspace/textpalette.cljs

@@ -42,7 +42,8 @@
                        :attrs attrs}))
                    selected-ids))))]
 
-    [:div.typography-item {:on-click handle-click}
+    [:div.typography-item {:title (:name typography)
+                           :on-click handle-click}
      [:div.typography-name
       {:style {:font-family (:font-family typography)
                :font-weight (:font-weight typography)