2028632 - Unbalanced spacings on new error pages with list of `whatCanYouDoItems`

Status: RESOLVED FIXED

(Firefox :: Security, defect, P3)

Description

[Sören Hentzschel]

Attachment: screenshot

https://httpbin.org/status/404 shows a 404 error page. In Firefox Nightly 151 (it's not the case in Firefox Beta 150), there is a list with two points and between these two points, there is a really large gap. However, there could definitely be a bit more space between the heading and the list.

Also note, that the second line of both bullet points starts too far to the right, compared to their first lines.

Comment 1

[Sören Hentzschel]

Attachment: proposal

proposal for a more balanced look

Comment 2

[Jack Brown]

Attachment: Bug 2028632 - Fix misaligned bullet points in net error what-can-you-do list - r=niklas

Comment 3

[Jack Brown]

Hey Sören, thanks for reporting this!

It looks like that hanging indent accounts for the bullet point's rendered width with a constant 1.2em, which will look slightly different depending on the typeface and font-size.

I added a patch that returns list-style-position to the default value and moves padding-inline-start: 1.2em to the <ul> to take the guess work out of the indent.

Comment 4

[Sören Hentzschel]

Thanks for the patch. It addresses the second part of the report and looks much better! Could you also address the first point? I think, there is too much spacing between the two bullet points. Instead, there could be a bit more spacing between the caption and the list.

Comment 5

[Mathew Hodson]

This does affect Firefox 150 but only on pages that have a list of items. The 404 page didn't have a list previously. You can see the issue on the timeout page (such as by trying to connect to http://10.0.0.0/).

Comment 6

[Jack Brown]

Thanks for the patch. It addresses the second part of the report and looks much better! Could you also address the first point? I think, there is too much spacing between the two bullet points. Instead, there could be a bit more spacing between the caption and the list.

Yeah, absolutely, I think you're right about the spacing. I updated the patch: there's more spacing between the heading and the list, and there's less space between the list items.

Comment 7

[Jack Brown]

Attachment: Screenshot 2026-04-06 at 12.49.47 AM.png

This is a screenshot with the latest changes applied. What do you think? Maybe still needs more space between the list and heading? Still too much space between list items?

Comment 8

[Sören Hentzschel]

This is a screenshot with the latest changes applied. What do you think? Maybe still needs more space between the list and heading? Still too much space between list items?

Thanks, it looks much better now! Maybe there could be a few more pixels between the heading and the list, or a few less pixels spacing between the list items. But I think it looks fine the way it is now.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/088dd84629df
https://hg.mozilla.org/integration/autoland/rev/285a65425eca
Fix misaligned bullet points in net error what-can-you-do list - r=niklas,desktop-theme-reviewers,dao

Comment 10

[rperta]

https://hg.mozilla.org/mozilla-central/rev/285a65425eca

Comment 11

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

The patch landed in nightly and beta is affected.
:jbrown, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox150 to wontfix.

For more information, please visit BugBot documentation.

Comment 12

[Jack Brown]

I think it would be good to request an uplift. It's low risk and noticeably improves the look of the list.

Comment 13

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Bullet points in the "What can you do?" list on some network error pages are visually misaligned. This is visible to all users who encounter the list.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: CSS-only change to toolkit/themes/shared/aboutNetError.css. No logic and no string changes.
• String changes made/needed?: No
• Is Android affected?: no

Comment 14

[Jack Brown]

Attachment: Bug 2028632 - Fix misaligned bullet points in net error what-can-you-do list -

Original Revision: https://phabricator.services.mozilla.com/D291933

Comment 15

[Mathew Hodson]

Beta commit
https://github.com/mozilla-firefox/firefox/commit/b1142a3bf37cee0a712a19c1e9c4365f60c843e8