Wrap lines of code to prevent empty horizontal scroll

[hugovk]

Steps to reproduce

1. On mobile, go to https://docs.python.org/3.13/whatsnew/3.12.html

I'm using Android / Samsung S20 / Chrome, can also repro in macOS / Chrome desktop emulating mobile with at least iPhone SE.

Expected result

Page fits in screen width, no horizontal scroll.

Actual result

You can scroll horizontally to the right and see blank bit of page:

Screenshots

This is caused by long code literals that don't wrap:

https://docs.python.org/3.13/whatsnew/3.12.html#asyncio

Screenshots

Possible fix

Adding overflow-wrap: break-word to span.pre and changing white-space: nowrap to something else (e.g. unset) can help:

Screenshots

Before	After

Re: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text

This white-space: nowrap CSS comes from https://docs.python.org/3.13/_static/basic.css which is from Sphinx:

https://github.com/sphinx-doc/sphinx/blob/d3c91f951255c6729a53e38c895ddc0af036b5b9/sphinx/themes/basic/static/basic.css_t#L762-L768

Should we fix it in Sphinx?

And we're several releases behind Sphinx and will be for a while (for example: python/cpython#104818 (comment)).

Should we instead/also put an override in this theme?

[pradyunsg]

I think placing it in the theme is the right move for this. That's primarily where the stylesheets for the rendered site are finally controlled.

[hugovk]

Please see PR #139.