diff --git a/packages/core-components/src/components/LogViewer/LogLine.tsx b/packages/core-components/src/components/LogViewer/LogLine.tsx index 637fe0f922..4f888fc68e 100644 --- a/packages/core-components/src/components/LogViewer/LogLine.tsx +++ b/packages/core-components/src/components/LogViewer/LogLine.tsx @@ -178,7 +178,7 @@ export function LogLine({ useEffect(() => { if (lineRef.current && setRowHeight) { // lineNumber is 1-based but height index is 0-based - setRowHeight(line.lineNumber - 1, lineRef.current.offsetHeight + 5); + setRowHeight(line.lineNumber - 1, lineRef.current.offsetHeight); } }, [line.lineNumber, setRowHeight]); diff --git a/packages/core-components/src/components/LogViewer/styles.ts b/packages/core-components/src/components/LogViewer/styles.ts index da83a8a444..6511854d68 100644 --- a/packages/core-components/src/components/LogViewer/styles.ts +++ b/packages/core-components/src/components/LogViewer/styles.ts @@ -67,10 +67,13 @@ export const useStyles = makeStyles( log: { fontFamily: '"Monaco", monospace', fontSize: theme.typography.pxToRem(12), + lineHeight: '20px', }, line: { position: 'relative', whiteSpace: 'pre', + display: 'flex', + alignItems: 'flex-start', '&:hover': { background: theme.palette.action.hover, @@ -94,6 +97,7 @@ export const useStyles = makeStyles( width: 60, marginRight: theme.spacing(1), cursor: 'pointer', + flexShrink: 0, }, textHighlight: { background: alpha(theme.palette.info.main, 0.15), @@ -166,7 +170,7 @@ export const useStyles = makeStyles( }, modifierTextWrap: { whiteSpace: 'pre-wrap', - lineHeight: '1.7', + wordBreak: 'break-all', }, }), { name: 'BackstageLogViewer' },