From 8906b9b5dc79a671ee76655c2ebd56effc9749f3 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 22 Jul 2022 17:10:02 +0300
Subject: [PATCH] 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 | 6 ++++++
core/themes/claro/css/components/details.pcss.css | 6 ++++++
2 files changed, 12 insertions(+)
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 6bcc296bf5e5..2a8fed8596f3 100644
--- a/core/themes/claro/css/components/details.css
+++ b/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);
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 00a50e9339eb..e91c9c6b1c09 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/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);
--
GitLab