[4.2.x] Fixed #34982 -- Fixed admin's read-only password widget and help texts alignment for tablet screen size.

Co-authored-by: Sarah Boyce <42296566+sarahboyce@users.noreply.github.com>

Backport of 729266c6f29c7a0677b24926a86a767ef3078b26 from main

5 files changed, 28 insertions, 3 deletions

diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
index e45abe1c07..6cfe9da119 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -24,7 +24,6 @@ form .form-row p {
 
 .flex-container {
     display: flex;
-    flex-wrap: wrap;
 }
 
 .form-multiline > div {
@@ -78,6 +77,7 @@ form ul.inline li {
 .aligned label {
     display: block;
     padding: 4px 10px 0 0;
+    min-width: 160px;
     width: 160px;
     word-wrap: break-word;
     line-height: 1;
diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
index a786557e4f..1d0a188f2c 100644
--- a/django/contrib/admin/static/admin/css/responsive.css
+++ b/django/contrib/admin/static/admin/css/responsive.css
@@ -588,6 +588,7 @@ input[type="submit"], button {
 
     .aligned label {
         width: 100%;
+        min-width: auto;
         padding: 0 0 10px;
     }
 
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index 5f7adcb221..1104e8b14a 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -69,6 +69,7 @@
     padding: 0;
     overflow: hidden;
     line-height: 1;
+    min-width: auto;
 }
 
 .selector .selector-available input,
diff --git a/docs/releases/4.2.8.txt b/docs/releases/4.2.8.txt
index 44d80060b5..0550e026bb 100644
--- a/docs/releases/4.2.8.txt
+++ b/docs/releases/4.2.8.txt
@@ -31,3 +31,7 @@ Bugfixes
 * Fixed a regression in Django 4.2 that caused a crash of querysets with
   aggregations on MariaDB when the ``ONLY_FULL_GROUP_BY`` SQL mode was enabled
   (:ticket:`34992`).
+
+* Fixed a regression in Django 4.2 where the admin's read-only password widget
+  and some help texts were incorrectly aligned at tablet widths
+  (:ticket:`34982`).
diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py
index 9c20ce2e2e..f40415681a 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -5576,6 +5576,7 @@ class SeleniumTests(AdminSeleniumTestCase):
         and with stacked and tabular inlines.
         Refs #13068, #9264, #9983, #9784.
         """
+        from selenium.webdriver import ActionChains
         from selenium.webdriver.common.by import By
 
         self.admin_login(
@@ -5588,6 +5589,8 @@ class SeleniumTests(AdminSeleniumTestCase):
 
         # Main form ----------------------------------------------------------
         self.selenium.find_element(By.ID, "id_pubdate").send_keys("2012-02-18")
+        status = self.selenium.find_element(By.ID, "id_status")
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option("#id_status", "option two")
         self.selenium.find_element(By.ID, "id_name").send_keys(
             " the mAin nÀMë and it's awεšomeıııİ"
@@ -5606,6 +5609,10 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-0-pubdate"
         ).send_keys("2011-12-17")
+        status = self.selenium.find_element(
+            By.ID, "id_relatedprepopulated_set-0-status"
+        )
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option("#id_relatedprepopulated_set-0-status", "option one")
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-0-name"
@@ -5637,6 +5644,10 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-1-pubdate"
         ).send_keys("1999-01-25")
+        status = self.selenium.find_element(
+            By.ID, "id_relatedprepopulated_set-1-status"
+        )
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option("#id_relatedprepopulated_set-1-status", "option two")
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-1-name"
@@ -5660,10 +5671,10 @@ class SeleniumTests(AdminSeleniumTestCase):
 
         # Tabular inlines ----------------------------------------------------
         # Initial inline
-        element = self.selenium.find_element(
+        status = self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-2-0-status"
         )
-        self.selenium.execute_script("window.scrollTo(0, %s);" % element.location["y"])
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-2-0-pubdate"
         ).send_keys("1234-12-07")
@@ -5694,6 +5705,10 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-2-1-pubdate"
         ).send_keys("1981-08-22")
+        status = self.selenium.find_element(
+            By.ID, "id_relatedprepopulated_set-2-1-status"
+        )
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option("#id_relatedprepopulated_set-2-1-status", "option one")
         self.selenium.find_element(
             By.ID, "id_relatedprepopulated_set-2-1-name"
@@ -5720,6 +5735,8 @@ class SeleniumTests(AdminSeleniumTestCase):
         # Initial inline.
         row_id = "id_relatedprepopulated_set-4-0-"
         self.selenium.find_element(By.ID, f"{row_id}pubdate").send_keys("2011-12-12")
+        status = self.selenium.find_element(By.ID, f"{row_id}status")
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option(f"#{row_id}status", "option one")
         self.selenium.find_element(By.ID, f"{row_id}name").send_keys(
             " sŤāÇkeð  inline !  "
@@ -5739,6 +5756,8 @@ class SeleniumTests(AdminSeleniumTestCase):
         )[3].click()
         row_id = "id_relatedprepopulated_set-4-1-"
         self.selenium.find_element(By.ID, f"{row_id}pubdate").send_keys("1999-01-20")
+        status = self.selenium.find_element(By.ID, f"{row_id}status")
+        ActionChains(self.selenium).move_to_element(status).click(status).perform()
         self.select_option(f"#{row_id}status", "option two")
         self.selenium.find_element(By.ID, f"{row_id}name").send_keys(
             " now you haVe anöther   sŤāÇkeð  inline with a very loooong "