Unverified Commit 4d5900c4 authored by lauriii's avatar lauriii
Browse files

Issue #3300941 by mherchel, cindytwilliams, Manibharathi E R, Chi: Claro:...

Issue #3300941 by mherchel, cindytwilliams, Manibharathi E R, Chi: Claro: Views UI layout is not aligned correctly
parent 95be6048
......@@ -37,19 +37,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: 1rem;
margin-bottom: 1rem;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
/*
* 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,
......
......@@ -38,12 +38,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);
......@@ -51,6 +45,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,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment