Syntax highlighted code blocks get bumped below Topics box

[coffee2code]

For handbook pages that contain code early in the content and have a Topics box, the Topics box causes the syntax highlighted code block to flow after/below the Topics. This leaves a big, unsightly gap in the content.

See:

• ​https://developer.wordpress.org/plugins/administration-menus/sub-menus/ (long, x-scrolling line of code; screenshot attached)
• ​https://developer.wordpress.org/plugins/administration-menus/top-level-menus/ (non x-scrolling, multi-line code block)

Ideally, the code block would fill the horizontal space available to it and automatically x-scroll if the content exceeds the available width (which is its current behavior when not running up against the Topics box).

[coffee2code]

Screenshot of ​https://developer.wordpress.org/plugins/administration-menus/sub-menus/ demonstrating issue

[melchoyce]

Changing .syntaxhighlighter from width: 100% to max-width: 100% fixes this:

.syntaxhighlighter {
    max-width: 100%;
}

Any reason why everything has !important?

[Viper007Bond]

Replying to melchoyce:

Any reason why everything has !important?

Without it, many themes would horribly mess up SyntaxHighlighter's styling.

[coffee2code]

In 1380:

developer.wordpress.org: Prevent early-appearing syntax highlighted code blocks from getting bumped below Topics box in handbooks.

Fixes #728.
Props melchoyce.