Fix iterm alternate buffer mode issue rendering backgrounds (#17634)

This commit is contained in:
Jacob Richman
2026-01-27 05:15:44 -08:00
committed by GitHub
parent 312a72acb8
commit 6b021aa27b
6 changed files with 183 additions and 1 deletions
@@ -13,7 +13,7 @@ import {
resolveColor,
getSafeLowColorBackground,
} from '../../themes/color-utils.js';
import { isLowColorDepth } from '../../utils/terminalUtils.js';
import { isLowColorDepth, isITerm2 } from '../../utils/terminalUtils.js';
export interface HalfLinePaddedBoxProps {
/**
@@ -77,6 +77,35 @@ const HalfLinePaddedBoxInternal: React.FC<HalfLinePaddedBoxProps> = ({
return <>{children}</>;
}
const isITerm = isITerm2();
if (isITerm) {
return (
<Box
width={terminalWidth}
flexDirection="column"
alignItems="stretch"
minHeight={1}
flexShrink={0}
>
<Box width={terminalWidth} flexDirection="row">
<Text color={backgroundColor}>{'▄'.repeat(terminalWidth)}</Text>
</Box>
<Box
width={terminalWidth}
flexDirection="column"
alignItems="stretch"
backgroundColor={backgroundColor}
>
{children}
</Box>
<Box width={terminalWidth} flexDirection="row">
<Text color={backgroundColor}>{'▀'.repeat(terminalWidth)}</Text>
</Box>
</Box>
);
}
return (
<Box
width={terminalWidth}