patternfly / react-log-viewer

MIT License
18 stars 14 forks source link

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

Closed Venefilyn closed 3 months ago

Venefilyn commented 1 year ago

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

image

image

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

DaoDaoNoCode commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

mcoker commented 1 year ago

@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? https://github.com/patternfly/react-log-viewer/blob/7d14727dad98f04fe8ad5990f1b724d4b24468ef/packages/module/src/LogViewer/LogViewer.tsx#L224-L234

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 4.87.101 :tada:

The release is available on:

Your semantic-release bot :package::rocket: