search

kits-ab / LogLady

Log file viewer
https://loglady.dev/
MIT License
8 stars 0 forks source link

#474 Background of files with long lines are set to the wrong size #510

Closed Atmanea closed 4 years ago

Atmanea commented 4 years ago

The background in the log viewer is now as wide as the container itself or as wide as the longest line.

The problem: When opening a file that contained one or more wider lines than the view was you could see that the background was not as wide as the longest line. Directly opening a new log file with lines shorter than the container would reveal that the size was still wrong but this time it had the width of the old log file.

The solution: The first part was to remove that we set the width manually in the styling of the Log Line-element. Not only did this calculated width come out wrong, it was not necessary since it could be solved with the right CSS code. With the styling 'display: inline-block' and 'min-width: 100%' on the fabric ui List that contained the Log Lines, the right behaviour was achieved. Now the width of all the divs inside the Log Viewer Container are the same, either as wide as the view or as wide as the current longest line.

Note that there are a lot of code removed since a lot of it had to do with calculating the width of the longest line. A lot of the effect hooks relied upon states updated by other effect hooks and they all had some parts in calculating the width and height of a line. There were also a div with a span and the letter 'A' hidden in the CSS code that was used to calculate the height of the font used. I took this opportunity to change the code of measuring this so that the resulting CSS didn't have this div and span left in its code.

gustavjorlov commented 4 years ago

Really nice I’ve to have deleted more than twice as many lines as added ;)

Atmanea commented 4 years ago

Really nice I’ve to have deleted more than twice as many lines as added ;)

It's a very nice feeling indeed :D

MelindaSW commented 4 years ago

Tried it on my macine and it works for me. I can not find any empty space where it showed up before. Inspiring to see that with like half of the code gone in LogViewerList it seems to work just as well, if not better, than before. I want to approve, but should I wait until the latest changes from develop are merged and see if it works then?