luci-mod-status & luci-theme-bootstrap: chain reference hover CSS incorrect, breaks page interaction on long ref lists
Is there an existing issue for this?
- [x] I have searched among all existing issues (including closed issues)
screenshots or captures
EXPECTED BEHAVIOUR:
Step 1) hover over chain reference title with mouse:
Step 2) List of referenced rules displays in popup below header:
ACTUAL BEHAVIOUR:
Step 1) hover mouse anywhere within the area where the popup would display in step 1 above:
Step 2) popup shows up when hovering in this area, making anything on the page within that area inaccessible:
Actual behaviour
The CSS for the :hover on chain reference lists in the iptables status display is broken on, at least, Firefox 144. It's using opacity instead of display to hide the popup, leading to the element that is meant to be hidden still triggering its parent hover when the mouse enters its area. This, especially on long reference lists (thx glinet[^1]) means that nothing underneath (z-level) the area of the "hidden" list can be interacted with.
I have a fix I've been using locally to deal with this. However, I'm limited to the bootstrap theme and so can't test it more widely. Since it involves editing the HTML generated in iptables.js, it therefore impacts all themes. Since I can't test all themes, I don't want to just drop a PR. However, I've submitted a PR to my own fork of the repo, which will allow you to view the affected code, and my bootstrap-theme fix at least: https://github.com/McCovican/luci/pull/1
The iptables.js alteration was to change the class name used for the <small> element containing the popup, so that my fix would not impact any other uses of .ifacebadge. It does impact other uses of .cbi-tooltip, but they too would inherently suffer from the same affliction anyway. In that case, if those elements, like this one, had another class applied to them with a higher specificity which overrode the display settings, this fix would break those. However, this was admittedly the point at which I ran out of coffee. I at least haven't come across any broken popups in my use of this so far.
The alternative, which would at least keep this fix from affecting other themes, would be to just nuke the display: inline-block on .ifacebadge, so that the .cbi-tooltip fix will work without having to change the class name. This does have a very minor visual impact in the display of the interface names, and no doubt also breaks something terribly important.
[^1]: Despite running glinet's firmware, I have confirmed, via the code available here on the repo, that this issue exists entirely within the currently avilable version of stock luci.
Expected behaviour
See above.
Steps to reproduce
LuCI -> System -> Firewall -> See above.
Additional Information
n/a (see footnote above)
What browsers do you see the problem on?
Firefox
Relevant log output
display seems more reasonable.
CSS tidy has some problems. some rules are missing in the minified css