🐛 Fix typography sample overflow in non-Latin locales (#11487)

* 🐛 Fix typography sample overflow in non-Latin locales

The typography sample glyph sits in a fixed 1.5rem grid column, sized
for the English sample "Ag". Locales that translate it to something
wider wrap it onto several lines and overflow the row: ko translates
the sample as "가나다" and renders it as three stacked characters, ar
as "أسلوب خط النص" and renders it as three stacked words. This affects
the workspace assets panel (list row, detail panel and rename row) and
the dashboard library card.

Let the sample column size to its content and keep the sample on a
single line. The 1.5rem minimum is preserved, so locales whose sample
already fits — English and every locale that keeps "Ag" — render
exactly as before.

Signed-off-by: JiMyung Lee <lee.ji.myung@gmail.com>

* 🐛 Keep spacing between typography sample and name

Follow-up to review on the typography sample overflow fix. Letting
the sample grow removed the fixed-width slack that used to separate it
from the name text, so:

- Dashboard library card: `.library-name-block` no longer assumes a
  24px sample via a hard-coded calc; it flexes to the remaining space
  and the sample does not shrink.
- Typography detail panel, list row and rename/advanced-edit row: add
  an explicit `var(--sp-xs)` gap between the sample and the name, and
  let the name input shrink instead of pushing the action buttons.
- Libraries "Updates" tab: the sample div had no class and still
  wrapped per character; give it a `nowrap` class.

Signed-off-by: JiMyung Lee <lee.ji.myung@gmail.com>

---------

Signed-off-by: JiMyung Lee <lee.ji.myung@gmail.com>
Signed-off-by: Eva Marco <eva.marco@kaleidos.net>
Co-authored-by: Eva Marco <eva.marco@kaleidos.net>

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

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")]

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

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