Fix the appearance of version/language selects

[obulat]

This PR fixes several issues in the appearance of version and language selects in Safari and Android Chrome.

On narrow screens, the theme overrides the native appearance of selects to make them look the same in all browsers. However, the non-prefixed appearance: none doesn't work in Safari and Chrome for Android, so I added the -webkit prefix.

I also added right padding to the version switcher to fix the overlapping of the arrow and the version number when the version number is long.

When clicking the select or focusing on it using tab, user can see an outline. Currently, it goes around the select itself, not the outer div, and looks like it's inside the box. I added the outline-offset to fix this.

[obulat]

On some mobile screens, the top search form was overflowing. I fixed it by adding max-width to the navbar. This happens on pages with long method names in the body that are inside paragraphs and cannot be split, which makes the window wider than 100%.

The default paddings and margins for lists and blockquotes look good on desktop, but make the readable part of the screen too narrow on mobile, I made them narrower.

[JulienPalard]

I deployed this fix on https://docs.python.org/3.11/ (english only, but other languages will automatically follow in the next 24 hours) so it can easily be reviewed.

[obulat]

I deployed this fix on https://docs.python.org/3.11/ (english only, but other languages will automatically follow in the next 24 hours) so it can easily be reviewed.

Thank you! I will need to fix that gray background on the switchers. It isn't there when I test in devtools q

[obulat]

@JulienPalard, could you deploy the latest version? I would like to see if the background color on the selects is fixed.

[JulienPalard]

For the record (also using the PR comment as an extension of my own memory), here's what it take to rebuild in production:

docsbuild@docs:~$ /srv/docsbuild/venv-with-sphinx-3.2.1/bin/python -m pip install --upgrade git+https://github.com/obulat/python-docs-theme@patch-1
docsbuild@docs:~$ /srv/docsbuild/venv/bin/python /srv/docsbuild/scripts/build_docs.py --quick --language en --branch 3.10

@obulat rebuild done for 3.10 only, english only.

[obulat]

Thank you, @JulienPalard ! I fixed a silly button border error, and now the gray switchers background on Chrome on Android is fixed. I don't have an iphone to test the site in Safari, though.

[JulienPalard]

I'm building it again on docs.python.org/3.10/

[building ...]

build complete.

[JulienPalard]

On docs.python.org/3.10 on my phone I'm getting a css issue:

I don't know how to debug this in mobile but it may be the same as #78

I do not have the issue on my desktop though, which is properly sending validation requests like:

GET /3.10/_static/pydoctheme.css HTTP/1.1
Host: docs.python.org
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: text/css,*/*;q=0.1
Accept-Language: fr,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
DNT: 1
Connection: keep-alive
Referer: https://docs.python.org/3.10/
If-Modified-Since: Tue, 11 May 2021 08:22:33 GMT
If-None-Match: "609a3ec9-285c"

[JulienPalard]

Thanks \o/