🐛 Fix font long name overflow

CHANGES.md

@@ -13,6 +13,7 @@
 ### :bug: Bugs fixed
 
 - Fix selection problems when devtools open [Taiga #11950](https://tree.taiga.io/project/penpot/issue/11950)
+- Fix long font names overlap [Taiga #11844](https://tree.taiga.io/project/penpot/issue/11844)
 
 ## 2.10.0 (Unreleased)
 
@@ -46,7 +47,7 @@
 - Fix issue where Alt + arrow keys shortcut interferes with letter-spacing when moving text layers [Taiga #11552](https://tree.taiga.io/project/penpot/issue/11771)
 - Fix consistency issues on how font variants are visualized [Taiga #11499](https://tree.taiga.io/project/penpot/us/11499)
 - Fix parsing rx and ry SVG values for rect radius [Taiga #11861](https://tree.taiga.io/project/penpot/issue/11861)
-- Misleading affordance in saved versions [Taiga #11887](https://tree.taiga.io/project/penpot/issue/11887)
+- Fix misleading affordance in saved versions [Taiga #11887](https://tree.taiga.io/project/penpot/issue/11887)
 - Fix pasting RTF text crashes penpot [Taiga #11717](https://tree.taiga.io/project/penpot/issue/11717)
 - Fix navigation arrows in Libraries & Templates carousel [Taiga #10609](https://tree.taiga.io/project/penpot/issue/10609)
 

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

@@ -6,6 +6,8 @@
 
 @import "refactor/common-refactor.scss";
 
+$width-settings-bar: $s-276;
+
 .typography-entry {
   display: flex;
   flex-direction: row;
@@ -74,18 +76,16 @@
 .typography-font {
   @include bodySmallTypography;
   @include textEllipsis;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  display: block;
+  align-self: center;
   margin-left: $s-6;
+}
+
+.typography-name {
   color: var(--assets-item-name-foreground-color);
 }
 
 .typography-font {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  min-width: 0;
   color: var(--assets-item-name-foreground-color-rest);
 }
 
@@ -250,6 +250,8 @@
 
 .text-options {
   @include flexColumn;
+  max-width: calc(var(--width, $width-settings-bar) - $s-16);
+
   &:not(.text-options-full-size) {
     position: relative;
   }
@@ -258,8 +260,14 @@
     @extend .asset-element;
     padding: $s-8 0 $s-8 $s-8;
     cursor: pointer;
+
     .name {
       flex-grow: 1;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
     }
     .icon {
       @include flexCenter;
@@ -413,7 +421,9 @@
 
   .label {
     @include bodySmallTypography;
+    @include textEllipsis;
     flex-grow: 1;
+    min-width: 0;
   }
 }