Prevent examples from blowing outside the viewport.

Overflow wasn't being triggered in multiple cases. Force break on
whitespace and overflow-wrap anywhere.

This seems to work from 350px mobile to desktop sizes.

Author: rouilj

doc/_static/style.css

@@ -313,3 +313,9 @@ dd p.first { margin-block-start: 0; }
 /* remove solid black border when focus is around the main section
    due to activation of skip-link. Page jumps there, that's enough. */
 #main:focus-visible {outline: none;}
+
+/* Prevent examples from extending outside the viewport */
+div.highlight > pre {
+    overflow-wrap: anywhere;
+    white-space: break-spaces;
+}

website/www/_static/style.css

@@ -314,13 +314,16 @@ dd p.first { margin-block-start: 0; }
    due to activation of skip-link. Page jumps there, that's enough. */
 #main:focus-visible {outline: none;}
 
+/* Prevent examples from extending outside the viewport */
+div.highlight > pre {
+    overflow-wrap: anywhere;
+    white-space: break-spaces;
+}
+
 /* website only */
 /* assume desktop reader for local html files, also no contact
    page for local doc files */
 
-/* make examples with long lines scrollable */
-div.highlight { overflow: auto;}
-
 @media only screen and (max-width:960px) {
     /* setup for layout/page frame */
     body { padding-inline-start: unset; /* remove space for float menu */}