search

alphagov / tech-docs-gem

Gem to distribute the tech docs project
https://tdt-documentation.london.cloudapps.digital/
MIT License
15 stars 38 forks source link

Code block border does not match code block area #100

Closed jonathanglassman closed 5 years ago

jonathanglassman commented 5 years ago

For example:

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

Making payments Pay

jonheslop commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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