From 1544b1decd968b54b4b1eab7bad6a077100efad0 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 5 Aug 2022 15:25:12 +0300
Subject: [PATCH] Issue #3300941 by mherchel, cindytwilliams, Manibharathi E R,
Chi: Claro: Views UI layout is not aligned correctly
---
core/themes/claro/css/components/details.css | 20 ++++++++++++-------
.../claro/css/components/details.pcss.css | 17 ++++++++++------
2 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 2a8fed8596f3..f12e867dc121 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -43,19 +43,25 @@
.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);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
background-color: var(--color-white);
- box-shadow: var(--details-box-shadow);
+ box-shadow: var(--details-box-shadow)
+
+ /*
+ * The following width and min-width values ensure that the <details> element
+ * does not shift widths when opening, in the event that a parent table
+ * element constrains the width. This can happen when toggling the
+ * "lazy-load" option within an image field.
+ */
+}
+
+td .claro-details {
+ width: min-content;
+ min-width: 100%
}
.claro-details--accordion-item,
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index e91c9c6b1c09..e6e7de2792cd 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -36,12 +36,6 @@
.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);
@@ -49,6 +43,17 @@
border-radius: var(--details-border-size-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
+
+ /*
+ * The following width and min-width values ensure that the <details> element
+ * does not shift widths when opening, in the event that a parent table
+ * element constrains the width. This can happen when toggling the
+ * "lazy-load" option within an image field.
+ */
+ @nest td & {
+ width: min-content;
+ min-width: 100%;
+ }
}
.claro-details--accordion-item,
--
GitLab