docs: Use grid in the CSS (#10942)

Instead of hardcoded 230px margin.

This also makes the ToC only take up a third of the screen when
narrow, and lets you scroll the rest.

Without, you'd have to scroll past the *entire* ToC, which is awkward

Remaining issue is the search box up top. Since this disables the one
in the sidebar once the window gets too narrow, that one is important,
and it isn't *great*

doc_src/python_docs_theme/static/pydoctheme.css

@@ -71,12 +71,10 @@ div.related h3 {
 }
 
 div.related li.right {
-  float: right;
   margin-right: 5px;
 }
 
 div.sphinxsidebar {
-  width: 230px;
   overflow-wrap: break-word;
 }
 
@@ -113,7 +111,6 @@ div.sphinxsidebar ul {
   margin: 10px;
   padding: 0;
   color: var(--secondary-link-color);
-  margin: 10px;
   list-style: none;
 }
 
@@ -548,10 +545,6 @@ div.sphinxsidebar ul {
 }
 
 
-div.bodywrapper {
-    margin-left: 230px;
-}
-
 aside.footnote > .label {
     display: inline;
 }
@@ -565,19 +558,36 @@ div.documentwrapper {
     width: 100%;
 }
 
+div.document {
+    display: grid;
+    grid-template: 1fr min-content / 12rem minmax(0,1fr);
+}
+
 /* On screens that are less than 700px wide remove anything non-essential
    - the sidebar, the gradient background, ... */
 @media screen and (max-width: 700px) {
+    div.document {
+        display: grid;
+        grid-template: 30vh min-content / 100%;
+    }
     div.sphinxsidebar {
         font-size: 16px;
         width: 100%;
         height: auto;
         position: relative;
+        /* To separate the "side"bar from the content below */
+        border-bottom: 1px solid;
+        border-color: var(--sidebar-border-color);
     }
-    div.bodywrapper {
+
+    /* Reduce margins to save space */
+    div.sphinxsidebar ul ul, div.sphinxsidebar ul, div.bodywrapper, div.content {
         margin-left: 0;
     }
 
+    div.sphinxsidebar h3, div.sphinxsidebar h4 {
+        margin-top: 0;
+    }
 
     div.sphinxsidebar ul {
         flex-basis: content;
@@ -585,14 +595,15 @@ div.documentwrapper {
     }
     div.sphinxsidebarwrapper {
         display: flex;
+        gap: 1em;
+        justify-content: space-between;
     }
     div.sphinxsidebarwrapper > h3:nth-child(5) {
         display: none;
     }
-    div#searchbox {
+    #searchbox {
         display: none !important;
     }
-    div.content {margin-left: 0;}
     div.body {
         padding: 1rem;
     }
@@ -613,6 +624,9 @@ div.documentwrapper {
 
 /* On print media remove anything non-essential. */
 @media print {
+    div.document {
+        display: block;
+    }
     .inline-search {
         display: none;
     }