Opened 9 years ago

Closed 9 years ago

#728 closed defect (bug) (fixed)

Syntax highlighted code blocks get bumped below Topics box

Reported by: coffee2code's profile coffee2code Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Developer Hub Keywords: needs-patch ui-feedback


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.


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).

Attachments (1)

728.png (158.0 KB) - added by coffee2code 9 years ago.
Screenshot of demonstrating issue

Download all attachments as: .zip

Change History (7)

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.

9 years ago

#2 follow-up: @melchoyce
9 years ago

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

.syntaxhighlighter {
    max-width: 100%;

Any reason why everything has !important?

#3 @coffee2code
9 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.

9 years ago

#5 in reply to: ↑ 2 @Viper007Bond
9 years ago

Replying to melchoyce:

Any reason why everything has !important?

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

#6 @coffee2code
9 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 1380: Prevent early-appearing syntax highlighted code blocks from getting bumped below Topics box in handbooks.

Fixes #728.
Props melchoyce.

Note: See TracTickets for help on using tickets.