From 9b8793a2df508ac5f2cc7eeee72720488fa6f422 Mon Sep 17 00:00:00 2001
From: Fabian Boehm <FHomborg@gmail.com>
Date: Wed, 25 Dec 2024 14:50:27 +0100
Subject: [PATCH] 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*
---
 .../python_docs_theme/static/pydoctheme.css   | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/doc_src/python_docs_theme/static/pydoctheme.css b/doc_src/python_docs_theme/static/pydoctheme.css
index b6b00ad64..41c062b74 100644
--- a/doc_src/python_docs_theme/static/pydoctheme.css
+++ b/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;
     }