Ensure code-blocks take-up fixed width that's lesser than the content width

[sivaraam]

From the discussion in #463:

@mjaix says:

I tried to understand why https://git.github.io/rev_news/2020/08/27/edition-66/, https://git.github.io/rev_news/2020/10/30/edition-68/,
and the actual Rev News have a formatting which results in a very slim
left menu colomn. Failed :-( ... hints are appreciated.

@jnareb says:

If I understand it correctly, 66 and 68 edition has a very slim left menu column because the contents column is exceedingly wide due to overly long line in the code block. The menu column starts in the same place, it is just that it has less place because content column crowds it.

I wonder if it would be possible in CSS to make the left margin slimmer instead of the menu column when contents column gets wide.

@sivaraam says:

Another way to fix this would be to ensure code blocks always take up a fixed width rather than taking up as much width as it wants. I'm thinking of something similar to how code blocks in GitHub issue comments wrap withing the comment box. If that could be achieved, we wouldn't have to worry about how long the code block is.

The "adjusting left-margin" suggestion mentioned by @jnareb has been handled in #471. We still need to look into ensuring the code blocks only fixed width that's lesser than the content width. Particularly, this would ensure the rev-news edition renders well (as a single-page) on mobile screens with smaller width.

[Ananyasingh2002]

Please assign me this issue. I would like to work on this issue.

[sivaraam]

Hey @Ananyasingh2002! Thanks for your interest. Feel free to raise an MR to fix the issue. 🙂

[Ananyasingh2002]

I fixed the issue, and the website is now fully responsive.

[chriscool]

@Ananyasingh2002 thanks! I don't have time now to check your fix though.

@sivaraam let me know if you have time to check the result.

[sivaraam]

Sure Christian. I've left a comment on the MR 👍🏼

[chriscool]

@sivaraam thanks a lot!