1481019 - Long titles overlap in breadcrumbs and add unecessary width to page from title

Status: RESOLVED DUPLICATE of bug 1419877

(developer.mozilla.org Graveyard :: Design, enhancement)

Description

[tossj]

What did you do?
================
1. Visit https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES

What happened?
==============
Due to the number of characters of the title topic (webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES), the title goes way out to the right of the page, creating a large white space on the right side.

Also, the long title length overflows from the breadcrumbs section on the left side, into the main content.

What should have happened?
==========================
The long titles should be broken to use more lines, or the text should be using overflow CSS logic to replace text overflows with ellipsis or something.

Is there anything else we should know?
======================================
There is a document-class CSS class. The following CSS fixes the title:

    .document-class {
        word-break: break-all;
    }

For the overflowing in the breadcrumbs the following CSS can be added:

    .crumbs li {
        word-break: break-all;
    }

These two fixes cause the long string to use more lines to fit. Managing text overflow could be another solution.

Comment 1

[tossj]

Attachment: Screenshot_2018-08-04 webRequest MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES.png

Breadcrumbs overflow

Comment 2

[tossj]

Attachment: Screenshot_2018-08-04 webRequest MAX_HANDLER-title-overflow.png

Title overflow

Comment 3

[tossj]

document-class in the initial report should be document-title. The following CSS fixes the title:

.document-title {
    word-break: break-all;
}