diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 11f25f8f86..df8adf08d6 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -308,7 +308,8 @@ $thumbnail-default-height: px2rem(168);
 
 .library-name-block {
   color: var(--color-foreground-secondary);
-  inline-size: calc(100% - var(--sp-xxl) - var(--sp-s));
+  flex: 1;
+  min-inline-size: 0;
   text-align: left;
 }
 
@@ -381,7 +382,9 @@ $thumbnail-default-height: px2rem(168);
   block-size: px2rem(20);
   line-height: 1;
   margin-inline-end: var(--sp-xs);
-  inline-size: px2rem(20);
+  flex-shrink: 0;
+  min-inline-size: px2rem(20);
+  white-space: nowrap;
   overflow: hidden;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index 5c09d951ff..23482a3d69 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -1064,7 +1064,8 @@
                    [:div {:class (stl/css :libraries-updates-item)
                           :key (dm/str (:id typography))}
                     [:*
-                     [:div {:style {:font-family (:font-family typography)
+                     [:div {:class (stl/css :typography-sample)
+                            :style {:font-family (:font-family typography)
                                     :font-weight (:font-weight typography)
                                     :font-style (:font-style typography)}}
                       (tr "workspace.assets.typography.sample")]
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index 87ad47c9a1..6dc6dfcec1 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -242,6 +242,10 @@
   min-width: $sz-24;
 }
 
+.typography-sample {
+  white-space: nowrap;
+}
+
 .name-block {
   color: var(--library-content-foreground-color);
   width: px2rem(168);
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 bbfa19734e..606303bf47 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,8 @@ $font-preview-box-height: 28px;
 
 .typography-selection-wrapper {
   display: grid;
-  grid-template-columns: $sz-24 auto 1fr;
+  grid-template-columns: minmax($sz-24, auto) auto 1fr;
+  column-gap: var(--sp-xs);
   flex: 1;
   block-size: 100%;
   inline-size: 100%;
@@ -78,6 +79,7 @@ $font-preview-box-height: 28px;
   align-items: center;
   min-inline-size: $sz-24;
   block-size: $sz-32;
+  white-space: nowrap;
   color: var(--color-foreground-secondary);
 }
 
@@ -94,6 +96,7 @@ $font-preview-box-height: 28px;
 
   display: flex;
   align-items: center;
+  gap: var(--sp-xs);
   block-size: $sz-32;
   inline-size: 100%;
   border-radius: $br-8;
@@ -116,9 +119,11 @@ $font-preview-box-height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
-  inline-size: $sz-24;
+  flex-shrink: 0;
+  min-inline-size: $sz-24;
   block-size: 100%;
   font-size: px2rem(16);
+  white-space: nowrap;
   line-height: 1;
   overflow: hidden;
   color: var(--color-foreground-primary);
@@ -128,6 +133,7 @@ $font-preview-box-height: 28px;
   font-size: px2rem(12);
   color: var(--font-name-wrapper-foreground-color);
   flex-grow: 1;
+  min-inline-size: 0;
   padding-inline-start: px2rem(6);
   margin: 0;
   border: none;
@@ -158,7 +164,8 @@ $font-preview-box-height: 28px;
   @extend %asset-element;
 
   display: grid;
-  grid-template-columns: $sz-24 auto 1fr $sz-28;
+  grid-template-columns: minmax($sz-24, auto) auto 1fr $sz-28;
+  column-gap: var(--sp-xs);
   flex: 1;
   block-size: $sz-32;
   inline-size: 100%;
@@ -175,6 +182,7 @@ $font-preview-box-height: 28px;
   font-size: px2rem(16);
   line-height: 1;
   block-size: $sz-32;
+  white-space: nowrap;
   padding: 0;
   overflow: hidden;
   color: var(--color-foreground-primary);