V8: Apply nicer log message wrapping

[kjac]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes #5230

Description

See #5230

Currently the log viewer messages break out of the table if the window is too small to contain them - like this:

With this PR applied, the messages stay inside the table:

[bjarnef]

Alternatively the table could have some horizontal scroll similar to this https://codepen.io/springborg/pen/MvPmPP
Then long log messages don't force the table row to grow.

[kjac]

@bjarnef I really don't want to introduce JS just to scroll the table 😄

Jokes aside, I did try with a horizontal scrollbar (basically a container with overflow-x: auto;). But it really doesn't work well, since the scrollbar is in the bottom of the very long list of log results:

[bjarnef]

@kjac you don't have to, e.g. when having the table wrapped inside a div something like in Bootstrap https://getbootstrap.com/docs/3.3/css/#tables-responsive

But I see the issue when having many rows and just a bit scroll and scrollbar is at bottom. Maybe the horisontal scroll and paging could be fixed at bottom in some way, but not sure if it is possible without adding some javascript.

[kjac]

@bjarnef the example above is done in CSS only 👍

I sincerely doubt anything can be done about the scrollbar at the bottom without a bunch of magic JS. You're welcome to give it a go if you fancy.

[poornimanayar]

Hi @kjac ,

I have tested this as is and it looks okay. The only thing I could think of is that if you have any exception which has huge amounts of text you will have to begin scrolling quite endlessly. and this happens on a normal size screen as well.

Poornima

[kjac]

@poornimanayar yeah this is what Bjarne and I were discussing earlier too. A horizontal scrollbar could be added, but it would end up in the bottom of all the log messages, meaning you would have to scroll to the bottom of the list in order to scroll horizontally. Probably not the best user experience either...?

[poornimanayar]

yes @kjac , thats why i left it there. Its one of those changes :-)

Poornima

[nul800sebastiaan]

I think this is the best solution for now, it could turn into a bit of scrolling indeed but a horizontal scroll is pretty unusable. Thanks @kjac! 👍