Bad code block overflow when using restructured text

[azaghal]

Actual behavior

When Zinnia is configured to use restructured text (ZINNIA_MARKUP_LANGUAGE = 'restructuredtext'), creating code blocks with long lines can result in bad overflows expanding into the right sidebar.

This can be much more easily noticed when viewing blog post on mobile phone (or a very narrow browser windows).

A simple fix would be to include the following as part of Zinnia's stock CSS (not sure if the pre. is too specific, though):

pre.literal-block {
    overflow-x: auto;
}

Expected behavior

Code blocks with long lines should not overflow into the sidebar, and should be confined to central content element by either using wrapping or horisontal scrollbar. Scrollbar is the preferred option (at least for me).

Steps to reproduce the issue

1. Set ZINNIA_MARKUP_LANGUAGE to 'restructuredtext'.

2. Create a new blog entry with a very long line. For example:

   Run the following command::
   
       echo "This is one very long line that is almost certain to be much wider than the central container that shows the actual blog post entry with this code block."
   

3. View the created blog entry in a browser window that will result in code block being too wide to be shown entirely without wrapping.

Specifications

• Zinnia version: 0.18.1
• Django version: 1.10.4
• Python version: 2.7
• Operating system: Debian 8 Jessie

Disclaimer

Please read these questions carefully and answer honestly with an x
into all the boxes [ ]:

• I have read the guidelines for contributing linked to above.
• I have checked for duplicate issues.
• This is not a support request.

[Fantomas42]

Hello,

I confirm the issue with the PRE markup only, I will apply a fix.

Best regards

[Fantomas42]

Hello,

the fix provided does not really apply to your case, (displaying code) but the default behavior is now safe.

For code displaying, add your rules under pre.literal-block, it's preferable.

Thank you for your vigilance.