1991235 - about:compat content is too smooshed together on Android tablets (and Android phones with "Desktop site" enabled)

Status: NEW

(Web Compatibility :: Interventions, defect, P2)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load about:compat in Firefox for Android (ideally a tablet, but can be a phone too)
2. Activate "Desktop site" in the 3-dot-menu, if it's not already activated.
3. Pick one of the listed domain names in the middle of the page, and then see if you can easily find the correct "Disable" button to tap, to turn its intervention on/off.

ACTUAL RESULTS:
It's really hard to match the button to the website - the content is too smooshed together, without any visible dividers, and so you can't easily tell which site goes with which "Disable" button. See attached screenshot.

EXPECTED RESULTS:
Better separation (and maybe dividing lines) so that you can follow a particular row from the site over to its "Disable" button, and so that you don't inadvertently fat-finger the wrong "Disable" button once you've identified the one that you want to press.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot on Pixel Tablet

Comment 2

[csnybot]

When was it redesigned?

This is what it used to like

Comment 3

[csnybot]

Attachment: Screenshot_Firefox Fenix.jpg

Comment 4

[csnybot]

Why is it different with request desktop site on/off?

Comment 5

[csnybot]

How it appears with request desktop site off

Comment 6

[csnybot]

Attachment: Screenshot_Firefox Nightly.jpg

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to csnybot from comment #2)

When was it redesigned?

Looks like the most recent redesign was in bug 1953314.

This is what it used to like

Indeed - on an Android phone with "Request Desktop Site", I see a similar "good" layout in 2025-01-25.

I tried bisecting and unfortunately there's a roughly 6-week range where about:compat doesn't load in one way or another (in mozregression-launched sessions at least), so I can't test this bug in there. e.g. 2025-02-05 gives me "Invalid address", while later builds like 2025-03-01 up until 2025-03-18 are able to load an empty version of about:compat (with no listings). 2025-03-19 is the first build after that broken region to actually load some listings here, and it's got the "bad" rendering shown in my screenshots.

So: I suspect this was a regression from the style changes in Bug 1953314, though it's hard to be sure.

(In reply to csnybot from comment #4)

Why is it different with request desktop site on/off?

Under the hood, it looks like the reason is that bug 1953314 added some logic to make the styles depend on whether the User Agent string does or does-not include the strings "Mobile" or "Tablet":
https://searchfox.org/firefox-main/rev/4258ca077fefa5202714932d293396d2e84b58da/browser/extensions/webcompat/about-compat/aboutCompat.js#48-50

const ua = navigator.userAgent;
if (ua.includes("Tablet") || ua.includes("Mobile")) {
  document.documentElement.classList.add("mobile");

And if you tick "Request desktop site", that changes the UA string that we expose so that we use a desktop-flavored UA string, so we don't end up triggering that^ logic (i.e. we don't get "mobile" in the documentElement's class list).

Comment 8

[Daniel Holbert [:dholbert]]

twisniewski, could you take a look? See the end of comment 7 in particular for why this seems to be super-squished-by-default on tablets now (and also squished on phones if the user happens to choose "Request desktop site").

Comment 9

[Thomas Wisniewski [:twisniewski]]

Ah, yes, pardon my delay in responding here; you diagnosed this just as I was about to chime in. This stuff is annoyingly tricky. I'll see what I can do ASAP.

Comment 10

[csnybot]

That was quite the response :)

I appreciate the information

I hope my screenshots helped

Comment 11

[csnybot]

Also, what happened to user agent overrides?

Did they get removed?

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1953314

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:denschub, could you have a look please?

For more information, please visit BugBot documentation.

Comment 14

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:denschub, could you have a look please?

For more information, please visit BugBot documentation.

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1953314

Comment 16

[Dennis Schubert [:denschub][OOO, back Jan 12]]

Fine, Bot, you win this time. Placeholder'ing P2/S3 for now - this is something we should fix, but given about:compat isn't super exposed to users (we don't really promote it), it's not a P1.