Hotfix: tiny CSS update to List component -- workaround to wrapping related issue in Safari

[sghoweri]

Jira

• http://vjira2:8080/browse/BDS-2087

Summary

Adds a tiny 1px addition to the two calc(width: 100% + X) rules in the List component as a workaround to address quirky wrapping behavior.

Safari - Before

Safari - After

Details

Technically adding 0.4px seems to work (making me suspect that this could be related to a Webkit sub-pixel rounding issue / quirk) -- in either case, this change should basically be unnoticable, other than addressing the main layout wrapping issue in Safari.

How to test

• Review the List component demos (specifically the inline / flex demos) to confirm there aren't any unintentional side-effects from this change
• Review the updated Completed Training page (especially in Safari) to confirm the wrapping issue is addressed when compared to the Completed Training Page from the v2.20.2 release.

[mikemai2awesome]

@danielamorse @sghoweri

I'm ok with rolling with this for now. If you look at the history, we keep adding and removing this 1px. When this 1px is added, it will create horizontal scroll in other browsers IF the list is edge to edge (either on the page container or some kind of box), which is not that often. Let's add a comment to the code to explain that.

[danielamorse]

I confirmed that this fix causes List to overflow the container by some fraction of a pixel, even in Chrome. We don't see it because there is overflow-x: hidden on the body. I forget the exact scenario where this popped up before, but it becomes a problem anytime you want to use List inside a container with overflow: auto.

Out of curiosity, I removed the width rule altogether and tested Chrome, Safari, FF, and Edge. The Completed Training template and the list demos appear to work as expected without it. @mikemai2awesome, do you remember the specific FF issue the width rule was added for? Perhaps it was for an older version of FF? 🤞

Here's my branch, tests are passing.

[mikemai2awesome]

Out of curiosity, I removed the width rule altogether and tested Chrome, Safari, FF, and Edge. The Completed Training template and the list demos appear to work as expected without it. @mikemai2awesome, do you remember the specific FF issue the width rule was added for? Perhaps it was for an older version of FF?

@danielamorse Do the following and test again. If all good then let's roll with that.

// Spacing Prop
@each $spacing-value in $bolt-spacing-values {
  $spacing-value-name: nth($spacing-value, 1);

  .c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
    margin-bottom: bolt-v-spacing(#{$spacing-value-name}) * -1;
    margin-left: bolt-spacing(#{$spacing-value-name}) * -1;
  }

  @-moz-document url-prefix() {
    .c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {
      // The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
      &.c-bolt-list--display-inline,
      &.c-bolt-list--display-flex {
        width: 100%; // Width must be defined in order for the list to dislay correctly in Firefox.
      }

      @each $breakpoint in $bolt-breakpoints {
        $breakpoint-name: nth($breakpoint, 1);

        &.c-bolt-list--display-inline\@#{$breakpoint-name} {
          @include bolt-mq($breakpoint-name) {
            width: 100%; // Width must be defined in order for the list to dislay correctly in Firefox.
          }
        }
      }
    }
    .c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
      // The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
      &.c-bolt-list--display-inline,
      &.c-bolt-list--display-flex {
        width: calc(
          100% + #{bolt-spacing($spacing-value-name)}
        ); // Width must be defined in order for the list to dislay correctly in Firefox.
      }

      @each $breakpoint in $bolt-breakpoints {
        $breakpoint-name: nth($breakpoint, 1);

        &.c-bolt-list--display-inline\@#{$breakpoint-name} {
          @include bolt-mq($breakpoint-name) {
            width: calc(
              100% + #{bolt-spacing($spacing-value-name)}
            ); // Width must be defined in order for the list to dislay correctly in Firefox.
          }
        }
      }
    }
  }

  .c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {
    @include bolt-margin-bottom(0);
    @include bolt-margin-left(0);
  }
}

[danielamorse]

@mikemai2awesome @sghoweri Mike's suggestion above appears to be working. I created PR #1806 with his change since I wanted to test it separately and because I don't think we're planning to release this as a hotfix.

If you guys approve #1806 we can close this one out.

[sghoweri]

Closing out in lieu of #1806 - thanks @danielamorse