Fix emoji width in debug console. (#14593)

This commit is contained in:
Jacob Richman
2025-12-05 12:58:54 -08:00
committed by GitHub
parent 2c4ec31ed1
commit 04cbae5b5f
3 changed files with 47 additions and 16 deletions

View File

@@ -58,17 +58,7 @@ describe('DetailedMessagesDisplay', () => {
);
const output = lastFrame();
expect(output).toContain('Debug Console');
expect(output).toContain('Log message');
expect(output).toContain('Warning message');
expect(output).toContain('Error message');
expect(output).toContain('Debug message');
// Check for icons
expect(output).toContain('');
expect(output).toContain('⚠');
expect(output).toContain('✖');
expect(output).toContain('🔍');
expect(output).toMatchSnapshot();
});
it('renders message counts', () => {
@@ -86,7 +76,6 @@ describe('DetailedMessagesDisplay', () => {
);
const output = lastFrame();
expect(output).toContain('Repeated message');
expect(output).toContain('(x5)');
expect(output).toMatchSnapshot();
});
});

View File

@@ -21,6 +21,8 @@ interface DetailedMessagesDisplayProps {
hasFocus: boolean;
}
const iconBoxWidth = 3;
export const DetailedMessagesDisplay: React.FC<
DetailedMessagesDisplayProps
> = ({ messages, maxHeight, width, hasFocus }) => {
@@ -34,8 +36,7 @@ export const DetailedMessagesDisplay: React.FC<
if (!msg) {
return 1;
}
const iconAndSpace = 2;
const textWidth = width - borderAndPadding - iconAndSpace;
const textWidth = width - borderAndPadding - iconBoxWidth;
if (textWidth <= 0) {
return 1;
}
@@ -96,7 +97,9 @@ export const DetailedMessagesDisplay: React.FC<
return (
<Box flexDirection="row">
<Text color={textColor}>{icon} </Text>
<Box minWidth={iconBoxWidth} flexShrink={0}>
<Text color={textColor}>{icon}</Text>
</Box>
<Text color={textColor} wrap="wrap">
{msg.content}
{msg.count && msg.count > 1 && (

View File

@@ -0,0 +1,39 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`DetailedMessagesDisplay > renders message counts 1`] = `
"
╭──────────────────────────────────────────────────────────────────────────────╮
│ Debug Console (F12 to close) │
│ │
Repeated message (x5) │
│ │
│ │
│ │
│ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`DetailedMessagesDisplay > renders messages correctly 1`] = `
"
╭──────────────────────────────────────────────────────────────────────────────╮
│ Debug Console (F12 to close) │
│ │
Log message │
│ ⚠ Warning message │
│ ✖ Error message │
│ 🔍 Debug message │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;