fix: add 5px safety buffer to chrome maxWidth to prevent title overflow on mobile

The heuristic char-width estimate slightly underestimates real font
width at narrow containers, causing titles to clip instead of wrapping.
A small buffer ensures the wrap triggers before the text overflows.

Author: rileyhilliard

packages/core/src/layout/__tests__/chrome.test.ts

@@ -104,7 +104,7 @@ describe('computeChrome', () => {
     const chrome: Chrome = { title: 'Title' };
     const result = computeChrome(chrome, theme, 600);
 
-    const expectedMaxWidth = 600 - theme.spacing.padding * 2;
+    const expectedMaxWidth = 600 - theme.spacing.padding * 2 - 5;
     expect(result.title!.maxWidth).toBe(expectedMaxWidth);
   });
 

packages/core/src/layout/chrome.ts

@@ -182,7 +182,10 @@ export function computeChrome(
 
   const pad = padding ?? theme.spacing.padding;
   const chromeGap = theme.spacing.chromeGap;
-  const maxWidth = width - pad * 2;
+  // Subtract a small buffer beyond padding so the heuristic char-width
+  // estimate triggers word-wrap before the real font overflows the container.
+  const WRAP_SAFETY_BUFFER = 5;
+  const maxWidth = width - pad * 2 - WRAP_SAFETY_BUFFER;
   const fontFamily = theme.fonts.family;
 
   // Track vertical cursor for top elements