Unverified Commit 1544b1de authored by Lauri Timmanee's avatar Lauri Timmanee
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 0603b8c2

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

+13 −7
Original line number Diff line number Diff line
@@ -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,

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

+11 −6
Original line number Diff line number Diff line
@@ -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,