Fix multiple minor CSS issues to fix mobile and tablets

docs/_static/style.css

@@ -16,6 +16,10 @@ Historically however, thanks to:
   box-sizing: border-box;
 }
 
+section {
+  word-break: break-word;
+}
+
 /* CSS variables would go here */
 :root {
   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -216,6 +220,7 @@ body {
   display: grid;
   min-height: 100%;
   grid-auto-rows: min-content auto min-content;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
     "s"
     "h"
@@ -1046,6 +1051,7 @@ code.xref, a code {
 
 span.pre {
   padding: 0 2px;
+  white-space: pre-wrap !important;
 }
 
 dl.class {
@@ -1211,12 +1217,13 @@ div.code-block-caption {
 
 /* desktop stuff */
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 768px) {
   .grid-item {
     max-width: unset;
   }
 
   .main-grid {
+    grid-template-columns: repeat(6, 1fr);
     grid-template-areas:
       "h h h h h h"
       "n n n n n n"
@@ -1273,6 +1280,7 @@ div.code-block-caption {
     position: sticky;
     top: 1em;
     max-height: calc(100vh - 2em);
+    max-width: 100%;
     overflow-y: auto;
     margin: 1em;
   }
@@ -1322,6 +1330,10 @@ div.code-block-caption {
       "s s s f f f f f f f f f f f f f"
   }
 
+  #sidebar {
+    max-width: unset;
+  }
+
   header > nav {
     margin-left: 18.75%;
     margin-right: 18.75%;