fix(fonts): the font list keeps its names readable and previews the face on a sample

Author: u8array

src/components/Fonts/FontManager.test.tsx

@@ -129,9 +129,11 @@ describe("FontManager delete owners", () => {
 });
 
 describe("FontManager preview face", () => {
-  it("draws a cached font's name in the face the cache registered", () => {
+  it("draws a sample beside a cached font's name in the face the cache registered, and the name in the UI face", () => {
     const r = render(<FontManager />);
-    expect(r.getByTitle("E:ARIAL.TTF").style.fontFamily).toMatch(/^"zpl-/);
+    const name = r.getByTitle("E:ARIAL.TTF");
+    expect(name.style.fontFamily).toBe("");
+    expect((name.nextElementSibling as HTMLElement).style.fontFamily).toMatch(/^"zpl-/);
   });
 
   it("names a font no browser face took, and leaves its row unstyled", async () => {
@@ -151,7 +153,7 @@ describe("FontManager preview face", () => {
     }
     const r = render(<FontManager />);
     expect(r.getByText(/cannot render this font/)).toBeTruthy();
-    expect(r.getByTitle("E:BROKEN.TTF").style.fontFamily).toBe("");
+    expect(r.getByTitle("E:BROKEN.TTF").nextElementSibling).toBeNull();
   });
 });
 

src/components/Fonts/FontManager.tsx

@@ -274,12 +274,16 @@ function FontEntry({
   return (
     <div className="flex flex-col gap-0.5 px-2 py-1.5 rounded border border-transparent hover:border-border-2 hover:bg-surface-2 transition-colors">
       <div className="grid grid-cols-[1fr_3rem_auto] items-center gap-2">
-        <span
-          className="font-mono text-xs text-text truncate"
-          style={cachedFontFaceStyle(previewFamily)}
-          title={name}
-        >
-          {name}
+        <span className="flex items-center gap-2 min-w-0">
+          <span className="font-mono text-xs text-text truncate" title={name}>
+            {name}
+          </span>
+          {/* The face shows on a sample, not on the name, so a display font leaves the name readable. */}
+          {previewFamily && (
+            <span className="text-sm leading-none text-muted shrink-0" style={cachedFontFaceStyle(previewFamily)} aria-hidden="true">
+              Aa
+            </span>
+          )}
         </span>
         <Tooltip
           className="w-full"