Navigation sidebar hides some elements on small windows.

[Mariusz Felisiak]

Navigation sidebar hides some elements, e.g. time/calendar pickers or filter horizontal widgets. It's a bug in a new feature, see #31034.

[Mariusz Felisiak]

Proposed solution:

diff --git a/django/contrib/admin/static/admin/css/nav_sidebar.css b/django/contrib/admin/static/admin/css/nav_sidebar.css
index 6fcfb26131..6968863e7c 100644
--- a/django/contrib/admin/static/admin/css/nav_sidebar.css
+++ b/django/contrib/admin/static/admin/css/nav_sidebar.css
@@ -93,7 +93,7 @@
     background: #ffc;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 1024px) {
     #nav-sidebar, #toggle-nav-sidebar {
         display: none;
     }

[Carlton Gibson]

I'm not sure that we need go as far as removing the sidebar for mid-sized screens. Shutting the sidebar is sufficient to resolve the issue, and it's a nice improvement.

Similar discussion on the PR: ​Tom, ​Mariusz. That was to do with inline scrolling but with the same conclusion, "...it can be mitigated by just closing it, so I think it's alright from the user's perspective".

The error here only shows up on the selenium headless tests. Actually using the admin on a 800px viewport is fine, great even: you just close the sidebar if you don't want it.
I'm a bit reticent to loose it for the tablet sized screen for what seems like a testing artifact. (We could either set a wider viewport in the test, or ensure the sidebar is closed on a smaller screen, to be more realistic.)

[Carlton Gibson]

Going to accept though, as we either have to fix the test or disable the feature.

[Tom Carrick]

Couple of things:

This probably isn't the right fix, but it should be possible to fix these tests by clicking the toggle after each request. This affects more the tests than actual users, however (IMO).

I do plan on looking at all the various display issues on the currently supported media queries between now and the non-blocking bug freeze, but I won't assign this particular ticket to myself yet in case anyone has more time before I get a chance to do that.

[Mariusz Felisiak]

​PR

[GitHub <noreply@…>]

In 18eb8528:

Fixed #31576 -- Fixed selenium tests with headless mode.

Horizontal scrollbar doesn't appear with the headless mode on small
windows, that's why window.scrollTo() is not an option for these
tests.

Tests changed after adding a navigation sidebar in
46fe506445666d8097945f0c1e8be11cfd644b28.

[Mariusz Felisiak <felisiak.mariusz@…>]

In e078870:

[3.1.x] Fixed #31576 -- Fixed selenium tests with headless mode.

Horizontal scrollbar doesn't appear with the headless mode on small
windows, that's why window.scrollTo() is not an option for these
tests.

Tests changed after adding a navigation sidebar in
46fe506445666d8097945f0c1e8be11cfd644b28.
Backport of 18eb852874a073001cb509f64002b6d82bdc760b from master