Code block border does not match code block area

[jonathanglassman]

For example:

https://govukpay-docs-test-jfh.cloudapps.digital/making_payments/#creating-a-payment

[jonheslop]

Oh weird I didnt understand what you meant by this! What browser were you using because it doesn’t do this in Firefox, which is why I was confused

[jonathanglassman]

Oh weird I didnt understand what you meant by this! What browser were you using because it doesn’t do this in Firefox, which is why I was confused

@jonheslop this happens in Chrome

[bravegrape]

@jonheslop also in Safari.

This reminds me of something @christophertomasdesign noticed about the tech docs template when he made a diagram for the docs. He said the text width in the tech docs template is around 100 px (?) larger than the text width on GOV.UK. Maybe the two are related?

[jonheslop]

This issue is caused by
https://github.com/alphagov/tech-docs-gem/blob/master/lib/assets/stylesheets/modules/_technical-documentation.scss#L122-L126

Which is seems like was a temp fix for another issue. I was just gonna remove the max-width: 40em until I saw the comment 🤔

But @bravegrape you’re probably right that the line length in general is probably too long but changing that doesn’t fix this issue.

Another fix would be to remove the wrapping div when ``` are used the markdown processor wraps the code with

<div class="highlight"><pre class="highlight javascript"><code>

The div seems unneccessary to me could just be

<pre class="highlight javascript"><code> or <div><pre class="highlight javascript"><code>

That would fix it but it looks like that is done by middleman-syntax gem and I don’t know enough ruby to fix this quickly