Affected versions

• Fx89.0a1
• Fx88.0b8
• Fx87.0

Affected platforms

• Windows 10

Steps to reproduce

1. Launch Firefox.
2. Navigate to about:networking.
3. Zoom in to about 250%.
4. Hover over the left side sections e.g. Web Sockets, DNS Lookup, Logging

Expected result

• Entire button is highlighted on hover.

Actual result

• Hover highlight is smaller that the button.

Regression range

• This is not a recent regression as the issue is reproducible in Fx66.0a1.

This page is technically from networking code, though it's quite possible the styling regression is just a toolkit/themes bug. Nihanth, are you able to take a quick look?

The rule that causes this seems to be [1], which applies a max-width when the viewport width is "small".

I think the rule expects the text to be replaced with an icon in this case? I'm not sure what the right fix is here, but I'm sure it's very low priority because this is a troubleshooting/debugging tool and not really exposed to users who don't know that it exists.

There are some general about:networking improvement ideas and polishing this kind of UI wrinkle would fit into that work, but I suspect someone will just pick it up before then. Thanks!

[1] https://searchfox.org/mozilla-central/rev/d8194cbbeaec11962ed67f83aea9984bf38f7c63/toolkit/themes/shared/in-content/common.inc.css#993

Er, as for whether this is a toolkit/themes bug... it's really hard for me to say without digging into other consumers of the "categories" style class.

Aha, indeed, the category sidebars in about:preferences and about:policies both show icons, and when the viewport is small the text is hidden altogether, which is why the height and the width are both set to 48px.

This is not a recent regression as I could reproduce the issue all the way back to Fx 63.0a1. The issue might be present since the implementation of the networking page.