Log viewer: Fixed column width for timestamp, level & logger name

[florian-h05]

When using the log viewer, I have regularly noticed that the time column is wider than required, as well as the logger name column taking up much space and making the message column move if a new log with a longer logger name comes in.
This PR sets the width of the time, level and logger name columns to a fixed value and limits the logger name length to the last 40 chars, which is enough to identify the logger.

[relativeci]

#2705 Bundle Size — 10.98MiB (~+0.01%).

876a56c(current) vs 7ef5b6f main#2698(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   1 change

	Current #2705	Baseline #2698
Initial JS	1.9MiB	1.9MiB
Initial CSS	577.21KiB	577.21KiB
Cache Invalidation	17.39%	17.51%
Chunks	227	227
Assets	250	250
Modules	2951	2951
Duplicate Modules	154	154
Duplicate Code	1.8%	1.8%
Packages	98	98
Duplicate Packages	2	2

Bundle size by type   2 changes 2 regressions

	Current #2705	Baseline #2698
JS	9.19MiB (~+0.01%)	9.19MiB
CSS	867.1KiB (~+0.01%)	867.02KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.38KiB	1.38KiB
Other	871B	871B

Bundle analysis report Branch florian-h05:logviewer-limit-colu... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

/cc @cdjackson @ghys

[cdjackson]

Thanks - I'll take a look later today.

Just to mention I noticed a bug on the table / column widths a day or two ago. Due to the virtual table, the column widths change as you scroll up/down through the list - depending on what part of the log is displayed. This ought to fix this.

Just for info I'm working on core changes and UI changes to improve the log display. By sending logs in an array rather than single messages speeds things up a hell of a lot (I've not tried it with zigbee debug yet, but sending through 100 lines of historic logs is essentially instantaneous rather than taking maybe a few hundred ms).

[florian-h05]

Just for info I'm working on core changes and UI changes to improve the log display. By sending logs in an array rather than single messages speeds things up a hell of a lot

Great to hear that and thanks for letting me know 👍

[cdjackson]

I'm reasonably ok with this. I do find the truncation of the logger slightly annoying, but on balance it's fine.

The time column seems to change width - depending on the message. ie if the message is long, then the time column is shrunk...

[florian-h05]

The time column seems to change width - depending on the message. ie if the message is long, then the time column is shrunk...

That’s because this PR was developed on top of your logger icon PR, the icon will avoid that behaviour.

[mherwege]

Instead of actually cutting the logger name, can't you do something with styling like suggested here: https://stackoverflow.com/questions/47926246/how-can-i-align-text-to-the-right-in-a-div-so-its-beginning-is-cut-down-with-ove ?

Cutting the text on the number of characters is difficult when not using a fixed width character set.