search

python / python-docs-theme

Sphinx theme for Python documentation
Other
75 stars 58 forks source link

Wrap lines of code to prevent empty horizontal scroll #129

Closed hugovk closed 1 year ago

hugovk commented 1 year ago

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: https://github.com/python/cpython/issues/104818#issuecomment-1565078060).

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

pradyunsg commented 1 year ago

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 commented 1 year ago

Please see PR https://github.com/python/python-docs-theme/pull/139.