update Sphinx Wagtail Theme to 5.3.0

* https://pypi.org/project/sphinx-wagtail-theme/5.3.0/
* https://github.com/wagtail/sphinx_wagtail_theme/blob/main/CHANGELOG.md#530---2022-08-20
* https://github.com/wagtail/sphinx_wagtail_theme/blob/main/CHANGELOG.md#520---2022-08-17

Additional changes
- use the magnify icon on the search field like the sphinx theme
- ensure the algolia search inputs work correctly for dark mode (the JS initially grabs the colour on page load and put on the new input field)
- fix issue of overflow x hidden being required due to the hidden input field not wrapping
- remove custom.css overrides that are no longer needed (are in the theme)

docs/_static/css/custom.css

@@ -1,12 +1,22 @@
-/* Add additional spacing between sections using semantic section elements, until we update sphinx-wagtail-theme */
-section {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem;
+/* fix a few issues with static/scrolling sidebar and algolia search fields
+- issue where overflow-x hidden was added but not required if hidden submit button wraps
+- added search content causes width of sidebar to make content wrap
+- search results not able to be shown inside scrollable container
+- https://github.com/wagtail/sphinx_wagtail_theme/issues/201
+*/
+
+.sidebar-container .collapse {
+  overflow-x: unset;
+}
+
+@media screen and (min-width: 992px) {
+  .sidebar-container {
+    width: 25%;
+  }
 }
 
-/* Workaround for https://github.com/executablebooks/MyST-Parser/issues/533 */
-li > p {
-  margin-bottom: 0;
+body.body--autocomplete-open .sidebar-container .collapse {
+  overflow-y: unset;
 }
 
 /* Wagtail Space */

docs/_static/css/docsearch.overrides.css

@@ -12,6 +12,19 @@
 a.algolia-docsearch-suggestion {
   border-bottom: 0;
 }
+
 #search-results h2 {
   display: none;
 }
+
+/* override algolia search input colors (set on element via JS) for dark mode alignment and radius for left icon */
+
+#search-form .algolia-autocomplete > .form-control {
+  background: #fff none repeat scroll 0% 0% padding-box !important;
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+
+body.theme-dark #search-form .algolia-autocomplete > .form-control {
+  background: #2e1f5e none repeat scroll 0% 0% padding-box !important;
+}

docs/_templates/searchbox.html

@@ -1,8 +1,13 @@
 {%- if builder != "singlehtml" %}
     <div id="searchbox" class="" role="search">
         <form id="search-form" action="{{ pathto('search') }}" autocomplete="off" method="get">
-            <input class="form-control p-3 h-100" type="text" name="q" placeholder="Search" aria-label="Search" id="searchinput" />
-            <input type="submit" style="visibility:hidden;position:absolute">
+            <div class="input-group flex-nowrap">
+                <div class="input-group-prepend">
+                    <div class="input-group-text border-right-0 bg-white py-3 pl-3 pr-2"><span class="fas fa-search"></span></div>
+                </div>
+                <input class="form-control py-3 pr-3 pl-3 h-100 border-left-0" type="text" name="q" placeholder="Search" aria-label="Search" id="searchinput" />
+            </div>
+            <input type="submit" style="visibility:hidden;position:absolute;display:block;">
         </form>
     </div>
 {%- endif %}

docs/requirements.txt

@@ -1,2 +1,2 @@
 myst_parser==0.17.2
-sphinx-wagtail-theme==5.1.1
+sphinx-wagtail-theme==5.3.0

setup.py

@@ -76,7 +76,7 @@ documentation_extras = [
     "sphinxcontrib-spelling>=5.4.0,<6",
     "Sphinx>=1.5.2",
     "sphinx-autobuild>=0.6.0",
-    "sphinx-wagtail-theme==5.1.1",
+    "sphinx-wagtail-theme==5.3.0",
     "myst_parser==0.17.0",
 ]