`isTextWrapped={false}` causes line indentation to disappear

[Venefilyn]

When isTextWrapped={false} is set it will not respect line indentation anymore and put everything in the beginning. See images

Reproducer
https://codesandbox.io/s/jolly-glitter-ovcjvo?file=/index.tsx

[DaoDaoNoCode]

Looks like when white-space: nowrap will get rid of the white spaces on the lines. @mcoker Do you have any idea about this problem? Looks like it's a CSS issue.

[mcoker]

@DaoDaoNoCode @SpyTec howdy! If you want to preserve white-space, but not line-wrap, looks like that should use white-space: pre instead? Here's a demo - https://codesandbox.io/s/busy-pike-jey2ht?file=/style.css

You can look at the available options for white-space if you'd like to check out the difference - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

For reference, we use white-space: break-spaces; for a default log viewer (which is basically like pre-wrap with a few differences), and white-space: nowrap for the nowrap version, like you mentioned.

[Venefilyn]

Thanks @mcoker! I noticed it created a vertical scrollbar, is that due to something else that needs to be fixed?

[mcoker]

@SpyTec hmm.... I noticed that only happens the first time the log viewer is set to nowrap - toggling it off/on again doesn't create the scrollbar. Also when I see the scroll bar, clicking into the text area of the log viewer makes it go away. I wonder if it has something to do with the way the height is set?

react-log-viewer/packages/module/src/LogViewer/LogViewer.tsx

Lines 224 to 234 in 7d14727

	const guessRowHeight = (rowIndex: number) => {
	if (!isTextWrapped) {
	return lineHeight;
	}
	// strip ansi escape code before estimate the row height
	const rowText = stripAnsi(parsedData[rowIndex]);
	// get the row numbers of the current text
	const numRows = Math.ceil(rowText.length / charNumsPerLine);
	// multiply by line height to get the total height
	return lineHeight * (numRows || 1);
	};

[github-actions]

🎉 This issue has been resolved in version 4.87.101 🎉

The release is available on:

• GitHub release
• npm package (@prerelease-v4 dist-tag)

Your semantic-release bot 📦🚀