Refs #36366 -- Fixed page number layout in admin pagination on small screens.

Regression in 3f59711581bd22ebd0f13fb040b15b69c0eee21f.

3 files changed, 21 insertions, 3 deletions

diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index eab5e16783..5e27bb1e1f 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -1161,7 +1161,6 @@ a.deletelink:focus, a.deletelink:hover {
     line-height: 22px;
     margin: 0;
     border-top: 1px solid var(--hairline-color);
-    width: 100%;
     box-sizing: border-box;
 }
 
diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css
index 141b79040d..60cbaf21eb 100644
--- a/django/contrib/admin/static/admin/css/changelists.css
+++ b/django/contrib/admin/static/admin/css/changelists.css
@@ -54,6 +54,7 @@
 #changelist .changelist-footer {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: 10px;
     border-top: 1px solid var(--hairline-color);
     border-bottom: 1px solid var(--hairline-color);
@@ -64,18 +65,17 @@
     background: var(--body-bg);
     border: none;
     padding: 0;
-    overflow: hidden;
 }
 
 #changelist .paginator {
     color: var(--body-quiet-color);
     border-bottom: 1px solid var(--hairline-color);
     background: var(--body-bg);
-    overflow: hidden;
 }
 
 #changelist .paginator ul {
     padding: 0;
+    white-space: nowrap;
 }
 
 /* CHANGELIST TABLES */
diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py
index db638c1ea8..ad37416cbf 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -7040,6 +7040,25 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.assertGreater(len(object_tools), 0)
         self.take_screenshot("change_list")
 
+    @screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
+    def test_pagination_layout(self):
+        from selenium.webdriver.common.by import By
+
+        self.admin_login(
+            username="super", password="secret", login_url=reverse("admin:index")
+        )
+        objects = [UnorderedObject(name=f"obj-{i}") for i in range(1, 23)]
+        UnorderedObject.objects.bulk_create(objects)
+        self.selenium.get(
+            self.live_server_url
+            + reverse("admin:admin_views_unorderedobject_changelist")
+        )
+        pages = self.selenium.find_elements(By.CSS_SELECTOR, "nav.paginator ul li")
+        self.assertGreater(len(pages), 1)
+        show_all = self.selenium.find_element(By.CSS_SELECTOR, "a.showall")
+        self.assertTrue(show_all.is_displayed())
+        self.take_screenshot("pagination")
+
 
 @override_settings(ROOT_URLCONF="admin_views.urls")
 class ReadonlyTest(AdminFieldExtractionMixin, TestCase):