Fixed #36556 -- Fixed TabularInline width overflowing the page.

django/contrib/admin/static/admin/css/forms.css

@@ -432,9 +432,12 @@ body.popup .submit-row {
     border: none;
 }
 
+.inline-related.tabular div.wrapper {
+    overflow-x: auto;
+}
+
 .inline-related.tabular fieldset.module table {
     width: 100%;
-    overflow-x: scroll;
 }
 
 .last-related fieldset {

django/contrib/admin/templates/admin/edit_inline/tabular.html

@@ -15,7 +15,8 @@
   </h2>
   {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
    {{ inline_admin_formset.formset.non_form_errors }}
-   <table>
+  <div class="wrapper">
+    <table>
      <thead><tr>
        <th class="original"></th>
      {% for field in inline_admin_formset.fields %}
@@ -62,7 +63,8 @@
         </tr>
      {% endfor %}
      </tbody>
-   </table>
+    </table>
+  </div>
   {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
 </fieldset>
   </div>

tests/admin_inlines/tests.py

@@ -2501,6 +2501,16 @@ class SeleniumTests(AdminSeleniumTestCase):
             tabular_inline.find_elements(By.CSS_SELECTOR, ".collapse"),
             [],
         )
+        # The table does not overflow the content section.
+        content = self.selenium.find_element(By.ID, "content-main")
+        tabular_wrapper = self.selenium.find_element(
+            By.CSS_SELECTOR, "div.tabular.inline-related div.wrapper"
+        )
+        self.assertGreater(
+            tabular_wrapper.find_element(By.TAG_NAME, "table").size["width"],
+            tabular_wrapper.size["width"],
+        )
+        self.assertLessEqual(tabular_wrapper.size["width"], content.size["width"])
 
     @screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
     def test_tabular_inline_delete_layout(self):