[Workaround-ed] Width issue in firewall rules list: could be wider

CDuv

Since v2.3 I've realized some lists in the GUI (such as firewall rules) are width-restraint and uses horizontal scroll.
Horizontal scroll is a good thing when not wanting to break UI interface, but restraining to fixed (small) width is not adapted to large displays: space is lost.

In the following screenshot (from a 1920px wide display) we can see the horizontal scroll bars are there although there is still space for a wider table:

Added to the "drag-n-drop" feature (to re-order rules): I cannot scroll without the scroll bar, which, on tables with many items, is not visible…

Is there a way to change this behavior? Do not use scroll bars (and break the interface on very wide rows) or use larger width.

NOYB

Don't make such long unbreakable alias names. Break the words with an underscore. In the firewall rules, for display purpose only, underscore in alias names will be replaced with space. Allowing line wrap. Reducing the likelihood of needing the horizontal scrollbar.

Sharaz

well the problem is the scrollable area the scroll bar is at the bottom, you have to scroll allt he way down to reveal the side-side scroll.

i have many IPsec tunnels, and when i have to scroll all the way down to be able to see the data at the far right, then scroll back up again to find it… its easy to lose your place, and have to scorll all the back down again so you can go back tot he left.

if i open the window full screen, regardless of how long the titles of objects are... there should eventually be a resolution that allows everything to open out fully justified.

this scrollable left-right area is very difficult to work with.

NOYB

@Sharaz:

this scrollable left-right area is very difficult to work with.

Not with a touch screen. Or with a mouse or pointer device the has horizontal scroll.

CDuv

@NOYB:

Don't make such long unbreakable alias names. Break the words with an underscore. In the firewall rules, for display purpose only, underscore in alias names will be replaced with space. Allowing line wrap. Reducing the likelihood of needing the horizontal scrollbar.

Thanks for the tip (didn't know undescores were replaces with spaces).
That long unbreakable name had been automatically created by pfSense (some times ago), once renamed I still had width issues.

I'm with Sharaz here: scrolling all the way down to scroll right and then scroll back up to finally discover what was hidden is counter productive.
Adding to this that you cannot select text anymore because of drag-and-drop feature (but that's another topic…)

In the end I edited the CSS file to set a "width: 100%" on the main container for large screen: works like a charm.

CDuv

Here is the shell command for anyone interested (tested on v2.3.2-RELEASE) :

sed -e 's/@media (min-width:1200px){.container{width:1170px}}/@media (min-width:1200px){.container{width:100%}}/' -i '' /usr/local/www/vendor/bootstrap/css/bootstrap.min.css

kevin.ruffus

@cduv Tested on 2.5.2 and it still works, though I found 90% to be more aesthetically pleasing.
Thank you for this, by the way, The limited screen usage for anything but the dashboard was slowly driving me nuts.

Using percentages for widths should be the default anyway, given the wide range of display resolutions available today. It also allows for a more flexible interface, though admittedly it can cause some headaches to get it right.