Describe the bug
The repo/gist pin card's description text may overflow because:
- Server-side line wrapping is character-count-based —
wrapTextMultiline() in src/common/fmt.js wraps at 59 characters using the wrap library
- The result is rendered as static SVG
<text> + <tspan> — no browser-side reflow
- Font fallback varies by OS — the CSS specifies
'Segoe UI', Ubuntu, Sans-Serif, which resolves to:
- Windows: Segoe UI
- Linux: Ubuntu
- macOS Chrome: Helvetica Neue (wider glyphs than the other fonts)
- iOS Safari: San Francisco
- The 59-character assumption does not fit Helvetica Neue, causing overflow on macOS frequently
- If there are many wide characters (such as
O), overflow is likely to occur. Conversely, if there are too many narrow characters (such as i), the actual text width per line becomes smaller, which doesn’t look good.
Expected behavior
No response
Screenshots / Live demo link
No response
Additional context
Root cause
wrapTextMultiline() wrapped text by character count (59 chars), not by the actual line width.
Proposed fix
Pixel-width-based word wrapping using the existing measureText() function and change line-break positions according to the font.
Related PR
#4863 (introducing pixed-width-based word wrapping)
Describe the bug
The repo/gist pin card's description text may overflow because:
wrapTextMultiline()insrc/common/fmt.jswraps at 59 characters using the wrap library<text>+<tspan>— no browser-side reflow'Segoe UI', Ubuntu, Sans-Serif, which resolves to:O), overflow is likely to occur. Conversely, if there are too many narrow characters (such asi), the actual text width per line becomes smaller, which doesn’t look good.Expected behavior
No response
Screenshots / Live demo link
No response
Additional context
Root cause
wrapTextMultiline()wrapped text by character count (59 chars), not by the actual line width.Proposed fix
Pixel-width-based word wrapping using the existing
measureText()function and change line-break positions according to the font.Related PR
#4863 (introducing pixed-width-based word wrapping)