Unverified Commit 4d5900c4 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 95be6048

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

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

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

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