Skip to content

Repository Pin/Gist Card Description Overflow #4862

@hyperfinitism

Description

@hyperfinitism

Describe the bug

The repo/gist pin card's description text may overflow because:

  1. Server-side line wrapping is character-count-based — wrapTextMultiline() in src/common/fmt.js wraps at 59 characters using the wrap library
  2. The result is rendered as static SVG <text> + <tspan> — no browser-side reflow
  3. 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
  4. The 59-character assumption does not fit Helvetica Neue, causing overflow on macOS frequently
  5. 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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions