Wrap lines of code to prevent empty horizontal scroll #129
Description
Steps to reproduce
- 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:
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?
Activity
pradyunsg commented on May 30, 2023
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 on Jul 27, 2023
Please see PR #139.