Bug 1731618 Comment 4 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Looking at the certificate error page as a reference, it's got this markup which saves it, inside its `@media (max-width: 970px) {` media-query rule:
```css
  body.certerror .title {
    /* !important is necessary here until Bug 1723718 is resolved */
    background-image: url("chrome://global/skin/icons/warning.svg") !important;
    background-position: top left;
    padding-top: 60px;
    margin-top: -60px;
  }
```

We need to add a similar rule for these other affected pages. If I add this rule manually in devtools (putting it inside the existing `@media (max-width: 970px)` section and just using `.title` as the selector), then it fixes the issue.
Looking at the certificate error page as a reference, it's got the following markup which saves it from hitting this same problem, inside its `@media (max-width: 970px) {` media-query rule:
```css
  body.certerror .title {
    /* !important is necessary here until Bug 1723718 is resolved */
    background-image: url("chrome://global/skin/icons/warning.svg") !important;
    background-position: top left;
    padding-top: 60px;
    margin-top: -60px;
  }
```

We need to add a similar rule for these other affected pages. If I add a simplified[1] version of this rule to one of the affected pages, manually using devtools style editor (inside the existing `@media (max-width: 970px)` section), then it fixes the issue.

[1] e.g. for about:config, I can open up devtools style editor and add the following inside of the info-pages.css rule for `@media (max-width: 970px) {...}`, and it fixes it the issue:
```
  .title {
    padding-top: 60px;
    margin-top: -60px;
  }
```

Back to Bug 1731618 Comment 4