[ui] Fix MiddleTruncate canvas text-measurement perf regression (#25566)

## Summary

Minimal fix for the perf regression introduced by #25178. **Scoped to the regression only** — a follow-up PR handles the pre-existing forced-reflow cost.

#25178 began copying `letterSpacing`, `textRendering`, `fontKerning`, `wordSpacing`, and `fontStretch` onto the canvas 2D context used to measure text for middle truncation. Assigning text-shaping properties like `letterSpacing`/`textRendering` forces the browser **off its fast text-measurement path**, making every `measureText` call dramatically slower. That cost is multiplied by the per-instance binary search in `calculateMiddleTruncation` and by the number of rendered rows.

A profiled asset-catalog load (group-by-Group, expanding groups) showed a single ~25s main-thread task with **~14s** of self-time in `measureText`.

### Origin

The header tracking that exposed this came from #25091 (`Heading` component → `letter-spacing: -0.02em`). #25178 then made the measuring canvas honor that tracking — correct, but on the slow path.

### Fix

Assign only `font` (which carries font-stretch via the shorthand) to the context, and account for `letterSpacing` **arithmetically** in the measure callback. This preserves #25178's correctness fix (headers no longer mis-wrap) while restoring the fast `measureText` path.

The canvas create/append/remove lifecycle is **intentionally unchanged** here. The remaining ~6s of forced-reflow cost (`document.body` append/remove per measurement) predates #25178 and is addressed in a stacked follow-up.

## Test Plan

- `yarn tsgo`, `yarn lint`, and the `calculateMiddleTruncation` tests pass.
- Re-profiling the affected catalog load shows the `measureText` self-time collapse.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Internal-RevId: 23bc1cf34fc7e4419f99c63a4ad58100c294a1da

Author: gibsondan

js_modules/ui-components/src/components/MiddleTruncate.tsx

@@ -88,6 +88,11 @@ type MeasurementConfig = {
   textString: string;
 };
 
+const parsePixels = (value: string) => {
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
 /**
  * Given a font style and a container width, use a canvas to determine the longest possible
  * middle-truncated string that will fit within the container.
@@ -108,16 +113,23 @@ const calculateMiddleTruncatedText = ({styles, width, textString}: MeasurementCo
 
   const targetWidth = width;
 
-  const {font, letterSpacing, wordSpacing, fontKerning, fontStretch, textRendering} = styles;
-  Object.assign(ctx, {font, letterSpacing, wordSpacing, fontKerning, fontStretch, textRendering});
+  // Only assign `font` (which carries font-stretch via the shorthand) to the
+  // context. Assigning text-shaping properties such as `letterSpacing` or
+  // `textRendering` forces the browser off its fast text-measurement path,
+  // making each `measureText` call dramatically slower — a cost multiplied by
+  // the binary search below and by every rendered row. `letterSpacing` still
+  // affects layout width, so we account for it arithmetically instead.
+  ctx.font = styles.font;
+  const letterSpacing = parsePixels(styles.letterSpacing);
   body.appendChild(canvas);
 
   // Search for the largest possible middle-truncated string that will fit within
   // the allotted width.
   const truncated = calculateMiddleTruncation(
     textString,
     targetWidth,
-    (value: string) => ctx.measureText(value).width,
+    (value: string) =>
+      ctx.measureText(value).width + (letterSpacing ? letterSpacing * value.length : 0),
   );
 
   body.removeChild(canvas);