fix(web): reset letter-spacing on .xterm to fix right-side char clipping

The body has letter-spacing: -0.011em (~-0.176px at 16px) for typography
refinement. xterm's DOM renderer measures cell width with that spacing
inherited (~7.83px), then sets an inline letter-spacing override on
.xterm-rows that cancels the body inherit, leaving glyphs to render at
their natural ~8.00px width.

The mismatch — measured 7.83px cells vs rendered 8.00px glyphs —
accumulates as cols grow, eventually overflowing .xterm-rows > div and
getting clipped by its overflow: hidden. At 124 cols the drift was
~21px, chopping ~3 chars off the right edge.

Resetting letter-spacing on .xterm makes both phases agree and reduces
the drift to sub-pixel rounding (~2px worst case at any reasonable
cols).
This commit is contained in:
Prateek 2026-05-08 02:10:53 +05:30
parent 994c9fc7e9
commit ddf9732a3e
1 changed files with 10 additions and 0 deletions

View File

@ -479,6 +479,16 @@ a:hover {
/* ── xterm.js terminal viewport scrollbar — macOS-style auto-hide ──── */
/* Reset body's -0.011em letter-spacing inside the terminal subtree.
xterm's DOM renderer measures cell width with the inherited spacing
applied, but renders rows with an inline override that effectively
cancels it. The mismatch causes glyphs to paint ~0.17px wider than
the allocated cell, which accumulates over many cols and clips the
rightmost chars under .xterm-rows > div { overflow: hidden }. */
.xterm {
letter-spacing: 0;
}
.xterm .xterm-viewport {
overflow-y: overlay !important;
}