Fix scroll appearing on split view with annotations

[jonatanklosko]

When using split-view and annotations, the annotation content width is overestimated by 1px leading to unnecessary scroll.

Before

(Note the horizontal scroll at the bottom)

After

[vercel]

@jonatanklosko is attempting to deploy a commit to the Pierre Computer Company Team on Vercel.

A member of the Team first needs to authorize it.

[jonatanklosko]

This is only relevant in split view, where each data-code has 1px border:

pierre/packages/diffs/src/style.css

Lines 472 to 483 in a5df5aa

	[data-diff-type='split'][data-overflow='scroll'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	[data-additions] {
	border-left: 1px solid var(--diffs-bg);
	}
	[data-deletions] {
	border-right: 1px solid var(--diffs-bg);
	}
	}

That border would be included in the measured size here. Later we compute the annotation content width as inlineSize - item.numberWidth:

pierre/packages/diffs/src/managers/ResizeManager.ts

Lines 238 to 247 in a5df5aa

	const targetWidth = Math.max(inlineSize - item.numberWidth, 0);
	item.codeWidth = inlineSize === 0 ? 'auto' : inlineSize;
	item.codeElement.style.setProperty(
	'--diffs-column-content-width',
	`${targetWidth > 0 ? `${targetWidth}px` : 'auto'}`
	);
	item.codeElement.style.setProperty(
	'--diffs-column-width',
	`${typeof item.codeWidth === 'number' ? `${item.codeWidth}px` : 'auto'}`
	);

We want to exclude the border from inlineSize, which we effectively do by using contentBoxSize here (instead of subtracting something hardcoded).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Apr 17, 2026 10:31pm
pierrejs-docs	Ready	Preview	Apr 17, 2026 10:31pm

[amadeus]

good catch, nice clean fix, thanks!