lots of empty space in new firewall ui, yet I must scroll

[randell]

Seconded. A browser has scroll bars. Just use all of the bloody space. And place all "action" buttons - new, select, delete, ... as well as apply - at the top of the page. Render a web page. It's a web UI, not an application.

Created an account just to +1 this.

I have a smallish laptop, 14" screen running 1080p resolution and that doesn't give much vertical space. It works much better with scrolling the entire window than the little grid.

[franco]

I'll be blunt:

> https://github.com/opnsense/core/commit/0e999cc5ab

this is real, works and addresses a specific concern.

> "browser must scroll"

this is vague, oversimplified and unrealistic.

I asked Stephan to look into this based on the topic and that's the end of it. PRs welcome.


Cheers,
Franco

[tessus]

I'll be euqally blunt. Who are you talking to? You asked a question. I answered. I would have expected a proper reply, not some annoyed comment that has nothing to do with what I brought up.

Get your attitude in order. This is no way to deal with people. At least not when they are as friendly as I am.

Fix your release notes, unless you want to come across as a liar. Or was this on purpose? Telling people that the issue was A, then tell people that A was fixed and react like someone killed your dog, because people tell you that it didn't fix A.

[franco]

> I'll be euqally blunt. Who are you talking to?

I haven't seen your screenshot yet. You illustrate the problem of flushing pagination, action buttons, apply bad out of the browser view.

> Fix your release notes, unless you want to come across as a liar.

You really need to take a break and cool off.  Your screenshot shows that the grid uses the full height of the screen and this refers to "lots of empty space" by OP being fixed.


Cheers,
Franco

[Seimus]

Lets make it official and discuss in an official technical matter, what is and what is not possible.

https://github.com/opnsense/core/issues/10130

Regards,
S.

[nero355]

Created an account just to +1 this.

COOL! :)

I have a smallish laptop, 14" screen running 1080p resolution and that doesn't give much vertical space.

I have no issue with not having "a perfect view" on my cheapass old laptop with 1366x768 resolution, but not seeing much more on a monitor with 1920x1200 resolution is just weird and should be fixed...

In general the webGUI could use some kind of "Compact Theme" option to avoid having to Zoom Out in my browser to take these screenshots for example : https://forum.opnsense.org/index.php?topic=9245.msg259581#msg259581

It works much better with scrolling the entire window than the little grid.

For sure! :)

[ahro_john]

Created an account just to +1 this.

COOL! :)

I have a smallish laptop, 14" screen running 1080p resolution and that doesn't give much vertical space.

I have no issue with not having "a perfect view" on my cheapass old laptop with 1366x768 resolution, but not seeing much more on a monitor with 1920x1200 resolution is just weird and should be fixed...

In general the webGUI could use some kind of "Compact Theme" option to avoid having to Zoom Out in my browser to take these screenshots for example : https://forum.opnsense.org/index.php?topic=9245.msg259581#msg259581

It works much better with scrolling the entire window than the little grid.

For sure! :)

Totally agree. The current WebGUI feels a bit too spaced out, especially on higher resolutions

[randell]

Sorry, my post about creating an account to +1 might have come across a little "complainy". That wasn't what I intended.

I did play around with a tampermonkey script to set the UIBootgrid.options.disableScroll. Setting this to true and also setting the table height to auto gave me the results I wanted, but unfortunately trying to monkeypatch that was not very dependable. (There are issues with tampermonkey and @run-at document-start when a page executes too fast, when most things was cached)

If someone with more knowledge of developing for opnSense wants to implement it, an option to set that to true and to change or stop setting the calculated height might be the best of both worlds.

Just a thought. It isn't a show stopper or anything.

This was one of the variations of my not always working but sort of working script I was playing around to better explain what I was doing:

Code Select Expand

// ==UserScript==
// @name         OPNSense Scroll
// @namespace    http://tampermonkey.net/
// @version      2026-04-10
// @description  Disables tabulator scrolling
// @author       Me
// @match        https://xxxxxx:444/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=taxfodder.com
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function()
 {
    'use strict';

    let _jquery;

    const applyPatch = (instance) => {

        if (!instance.fn || instance.fn.UIBootgrid_Patched) return;
        let _uiBootgrid;

        Object.defineProperty(instance.fn, 'UIBootgrid', {
            get: () => _uiBootgrid,
            set: function(originalFunc) {
                console.log("Hooked UIBootgrid successfully!");
                _uiBootgrid = function(...args) {
                    const replacement = originalFunc.apply(this, args);
                    const bgInstance = replacement.data('UIBootgrid');
                    if (bgInstance) {
                        bgInstance.options.disableScroll = true;
                    }
                    //console.log('patched');
                    return replacement;
                };
            },
            configurable: true
        });

        instance.fn.UIBootgrid_Patched = true;
    };

    const defineHook = (propName) => {
        Object.defineProperty(window, propName, {
            get: () => _jquery,
            set: (val) => {
                _jquery = val;
                if (val && val.fn) {
                    applyPatch(val);
                }
            },
            configurable: true
        });
    };

    defineHook('jQuery');
    defineHook('$');

    // Handle the case where jQuery is already there
    if (window.jQuery) {
        _jquery = window.jQuery;
        applyPatch(_jquery);
    }

    window.addEventListener('load', () => {
        setTimeout(() => {
            const tables = document.querySelectorAll('div.tabulator');
            //console.log(tables);
            if (tables) {
                tables.forEach(t1 => {
                    t1.style.height = 'auto';
                });
            }
        }, 100);
    });

})();