base theme: Wrap sidebar components in <div>s

[not-my-profile]

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.

[tk0miya]

Looks good to me.

@ericholscher Before merging, I'd like to ask an advice from readthedocs team. Does this bring troubles to sphinx_rtd_theme? Please let me know your opinion.

[astrojuanlu]

cc @nienn

[ericholscher]

@tk0miya Thanks for the ping. Juanlu already pinged one of our frontend folks, who can hopefully give some feedback soon. @agjohnson would be the other person who would be good to comment on it as well.

[nienn]

I don't think we are including any of the modified templates in our theme. Instead we replace the entire layout.html with our custom one.

But I'd rather @agjohnson confirmed this.

For quick reference, in the basic theme the affected files are included here:

sphinx/sphinx/themes/basic/layout.html

Lines 68 to 71 in 7a6272f

	{%- include "localtoc.html" %}
	{%- endblock %}
	{%- block sidebarrel %}
	{%- include "relations.html" %}

[agjohnson]

sphinx_rtd_theme does technically inherit from basic:
https://github.com/readthedocs/sphinx_rtd_theme/blob/master/sphinx_rtd_theme/theme.conf#L2

However the theme also defines it's own local toc and bread crumbs for page relations, so is not reusing either of these files. If we were to reuse these files, we might have to alter our selectors lsightly, if any changes are required at all.

This change seems safe for sphinx_rtd_theme 👍 Thanks for the heads up @tk0miya !

[tk0miya]

Thank you for your comments and contributions. Now merging.