make line breaks and overflow cleaner

Signed-off-by: Ben Vu <benv@spotify.com>

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]);
 

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' },