Firewall log widget (6 columns view problem)

[opnsenseuser]

don´t know if im right here but this is what i get if i switch to 6 columns . the firewall log widget view is not perfect! Its the same problem on all themes. even the main theme of opnsense has this problem.

[fichtner]

Yeah, this is a general CSS problem with the tables used that force the overflow. Diffs are less prone to this, but it's too much work to go through all static pages and fix it (the .php files also have this defect when screen space is rare). There used to be tickets for this, e.g. https://github.com/opnsense/core/issues/1003

[opnsenseuser]

but unfortunately you have to admit that this looks pretty unprofessional...sorry for these hard words!! we all know what a hard work it is for you and all opnsense developers.

[fichtner]

I agree. I have no time to work on this, unfortunately.

[opnsenseuser]

can you tell me which file is responsible for this widget. then at least I can see if I can improve it myself somehow.

[fichtner]

It's this file: https://github.com/opnsense/core/blob/master/src/www/widgets/widgets/system_log.widget.php

[opnsenseuser]

it was easier than I thought.

6 columns now look like this

[opnsenseuser]

It still wouldn´t be totally perfect, but much better adapted to 6 columns. it would at least have fewer presentation problems and would not be completely moved immediately. i tested all columns options. had no problems at all.

it would be distortion-free up to a browser size of 2056pixels in width. before it was totally distorted even if you have the dashboard on a 2500 pixel wide monitor viewed. as I have it.

@franco what do you think?

[fichtner]

That only works for 6 column layout :/

The problem is that tables overflow the div containers.

How about this?

.dashboard_grid_column {
  table-layout: fixed;
}

[fichtner]

If you squeeze it to tight it looks bad too, but where there's no space there's no grace.

[fichtner]

sorry I tested with table { ... } but that affects other pages so we need to fix tables within dashboard_grid_column, not just that class

[opnsenseuser]

yes, this solution is only for the 6 columns issue.

in the 6 columns view it is also worst distorted. in the other views, one can still live with it, since most use a monitor with a resolution of 1920x1080. but on this resolution and beyond, the 6 columns view is really awful. unless you change this view to 20%. then it is in the 6 columns view is even better or at least as good as in 1,2,3 and 4 and that would be at least an improvement.

[fichtner]

Can you try this?

.dashboard_grid_column table {
  table-layout: fixed;
}

[opnsenseuser]

yes we have to test this. i need a test-team! Maybe the rebellion team can test this. It's kind of bad for me to look at pfsense and see that everything looks perfect. it would be a pity if we could not do that too. shame about the whole perfect interior if the packaging does not have the same quality.

[fichtner]

It's boring to work on a perfect product, but that's just my view. ;)

[opnsenseuser]

:-)

[opnsenseuser]

deleted browser cache -> after I set .col-md-2 to 20%, I've gone through all the serives, reporting, firewall and so on and could not find a problem somewhere where it comes to presentation problems. but of course we have to test that much more effectively!

[opnsenseuser]

.dashboard_grid_column table { table-layout: fixed; }

result:

I want to continue testing the " .col-md-2 {width: 20%; }". I think it's the right approach

[fichtner]

Err, hold on now. I'm not sure how col-md-2 at 20% makes any sense whatsoever: if you say 6 column layout but set it to 20% which is 5 times to 100% which is 5 columns in your screenshot. Of course 5 columns has more space for the table contents than 6...

https://github.com/opnsense/core/blob/master/src/opnsense/www/themes/opnsense/build/css/main.css#L2200

[opnsenseuser]

I did a pr with your changes for tukan and cicada too.

[opnsenseuser]

Maybe we should tie the 6 columns option to the new sidebar. So the 6 columns are only selectable if you have activated the new sidebar. this is just an idea but would offer for presentation problems and monitor resolution.