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

@@ -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 %}

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 %}