Issue #3291100 by mherchel, Rinku Jacob 13, rkoller, andy-blum: Nested details...

Issue #3291100 by mherchel, Rinku Jacob 13, rkoller, andy-blum: Nested details element within content type's "manage display" UI changes width when opened

core/themes/claro/css/components/details.css

@@ -43,6 +43,12 @@
 
 .claro-details {
   display: block;
+  /* The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent element
+   * constrains the width. This can happen when toggling the "lazy-load" option
+   * within an image field. */
+  width: min-content;
+  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);

core/themes/claro/css/components/details.pcss.css

@@ -36,6 +36,12 @@
 
 .claro-details {
   display: block;
+  /* The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent element
+   * constrains the width. This can happen when toggling the "lazy-load" option
+   * within an image field. */
+  width: min-content;
+  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);