css: Stop rendering code blocks as inline-blocks in webhook docs.

Previously, a code block with a small width would be displayed
inline with the previous paragraph's text.

To fix this, now every p inside an li element except the first is
a block instead of an inline-block. However, this only applies to
li elements for integration instructions.

This makes sense intuitively because if there are multiple p's
in a list element, not all of those should be inline-blocks. The
first one should be because it needs to be inline with the list
number. The rest should be treated (and displayed) as separate
paragraphs.

Another thing to keep in mind is that the way Markdown code
blocks get converted to HTML is such that every code block
becomes <p><code></code></p> when converted to HTML.
This commit is contained in:
Eeshan Garg 2018-03-06 19:38:52 -03:30 committed by Tim Abbott
parent dde9bb448f
commit da4ac38e37
1 changed files with 6 additions and 0 deletions

View File

@ -1047,6 +1047,12 @@ input#terminal:checked ~ #tab-terminal {
margin-left: 220px; margin-left: 220px;
} }
/* This is a workaround for line-wrapping issues with markdown code
blocks; see CircleCI docs for an example of what it fixes */
.integration-instructions .help-content ol li p:not(:first-child) {
display: block;
}
.api-page-header, .api-page-header,
.authors-page-header, .authors-page-header,
.integrations-page-header, .integrations-page-header,