From ddf9732a3ea8ec162649d07ca863d74a49c820a6 Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 8 May 2026 02:10:53 +0530 Subject: [PATCH] fix(web): reset letter-spacing on .xterm to fix right-side char clipping MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- packages/web/src/app/globals.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css index efdd58cf9..0d07719cf 100644 --- a/packages/web/src/app/globals.css +++ b/packages/web/src/app/globals.css @@ -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; }