From 9e7e6dd5ed26dac6529973af1e63142d128ef8b3 Mon Sep 17 00:00:00 2001
From: Martin Fischer <martin@push-f.com>
Date: Wed, 3 Nov 2021 12:22:01 +0100
Subject: [PATCH] base theme: Wrap sidebar components in <div>s

Responsive themes inheriting from the base theme might want to display
the sidebar horizontally on narrower screens, which can be easily
achieved with flexbox. This however requires that the individual sidebar
components are wrapped in HTML elements so that flexbox can properly lay
them out.
---
 sphinx/themes/basic/localtoc.html  |  6 ++++--
 sphinx/themes/basic/relations.html | 16 ++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/sphinx/themes/basic/localtoc.html b/sphinx/themes/basic/localtoc.html
index d761c23787d..750f5daa02d 100644
--- a/sphinx/themes/basic/localtoc.html
+++ b/sphinx/themes/basic/localtoc.html
@@ -8,6 +8,8 @@
     :license: BSD, see LICENSE for details.
 #}
 {%- if display_toc %}
-  <h3><a href="{{ pathto(root_doc)|e }}">{{ _('Table of Contents') }}</a></h3>
-  {{ toc }}
+  <div>
+    <h3><a href="{{ pathto(root_doc)|e }}">{{ _('Table of Contents') }}</a></h3>
+    {{ toc }}
+  </div>
 {%- endif %}
diff --git a/sphinx/themes/basic/relations.html b/sphinx/themes/basic/relations.html
index c4391fe4d40..db478b71938 100644
--- a/sphinx/themes/basic/relations.html
+++ b/sphinx/themes/basic/relations.html
@@ -8,12 +8,16 @@
     :license: BSD, see LICENSE for details.
 #}
 {%- if prev %}
-  <h4>{{ _('Previous topic') }}</h4>
-  <p class="topless"><a href="{{ prev.link|e }}"
-                        title="{{ _('previous chapter') }}">{{ prev.title }}</a></p>
+  <div>
+    <h4>{{ _('Previous topic') }}</h4>
+    <p class="topless"><a href="{{ prev.link|e }}"
+                          title="{{ _('previous chapter') }}">{{ prev.title }}</a></p>
+  </div>
 {%- endif %}
 {%- if next %}
-  <h4>{{ _('Next topic') }}</h4>
-  <p class="topless"><a href="{{ next.link|e }}"
-                        title="{{ _('next chapter') }}">{{ next.title }}</a></p>
+  <div>
+    <h4>{{ _('Next topic') }}</h4>
+    <p class="topless"><a href="{{ next.link|e }}"
+                          title="{{ _('next chapter') }}">{{ next.title }}</a></p>
+  </div>
 {%- endif %}