Remove the maximum height from inlines

.pre-commit-config.yaml

@@ -23,7 +23,7 @@ repos:
     hooks:
       - id: absolufy-imports
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.2.1"
+    rev: "v0.3.2"
     hooks:
       - id: ruff
       - id: ruff-format

CHANGELOG.rst

@@ -7,6 +7,7 @@ Next version
 
 - Fixed the content editor initialization: The active region was only set after
   saving and not initially.
+- Removed the maximum height from content editor inlines.
 
 
 6.4 (2024-02-16)

content_editor/models.py

@@ -64,12 +64,7 @@ class Meta:
             ordering = ["ordering"]
 
         def __str__(self):
-            return "{}<region={} ordering={} pk={}>".format(
-                self._meta.label,
-                self.region,
-                self.ordering,
-                self.pk,
-            )
+            return f"{self._meta.label}<region={self.region} ordering={self.ordering} pk={self.pk}>"
 
         @classmethod
         def get_queryset(cls):

content_editor/static/content_editor/content_editor.css

@@ -136,27 +136,31 @@ h3[draggable] {
   content: "new";
 }
 
-.order-machine .inline-related fieldset {
-  /* Animate out of view REAL FAST */
-  transition: max-height 0.2s cubic-bezier(0, 1.05, 0, 1);
-  max-height: 6500px;
-  overflow: hidden;
-  position: relative;
-}
-
 .order-machine .inline-related {
   transition: border 0.2s;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.order-machine .inline-related fieldset {
+  position: relative;
+  overflow: hidden;
 }
 
 .order-machine .inline-related.selected > h3 {
   color: white;
   background-color: var(--button-bg, #79aec8);
 }
 
-.order-machine .inline-related.for-deletion fieldset,
-.order-machine .inline-related.collapsed fieldset {
-  max-height: 0;
-  visibility: hidden;
+.order-machine .inline-related.empty-form {
+  display: none; /* Override display: grid; above */
+}
+
+.order-machine .inline-related.for-deletion,
+.order-machine .inline-related.collapsed {
+  overflow: hidden;
+  grid-template-rows: min-content 0fr;
 }
 
 .order-machine .inline-related.for-deletion > h3::after {