Small alignment issue for star icon in browser compatibility tables

In between 1199px and 1288px viewport width, the star icon that is stored in the pseudo element ::before is slightly off center in the browser compatibility table. I’m viewing it on this page dragenter event but it should be the same for each BC table.

This is due to the margin-left: 6px property on .bc-icons i:before which plays nice for every other responsive layout but between 1199px-1288px it has this small off center appearance.

Updating that property to margin-left: 2px provides a much more centered alignment of the star icon.

The above seems to be much more centered. This makes the area that the media query would cover be from 1199px-1223px. Then the margin-left: 6px would be applied again as the media condition wouldn’t be used outside that range.

I remember seeing how media queries worked on the .scss end and the “mobile-first” approach, so I’m not sure if you think its “worth it” to add such a small media query to better center the star icon but let me know your thoughts.

@media (min-width: 1199px) and (max-width: 1223px) {
  .bc-icons i:before {
     background-size: 18px;
     ...
     margin-left: 2px;
  }
}

Lastly, the .bc-history affects two other places where the star icon is styled by .bc-icons i:before, in the see implementation notes, and in the footnotes dropdown which does reduce the space in between the text and icon a bit since the container is larger and doesn’t wrap to the next line like it does in the BC table. This looks squished with 2px so the footnotes box from the dropdown should retain the 6px margin left to not look like below.

Screenshot with margin-left: 2px added

This is a lot of tinkering just to provide a little better centering for a small range of viewport widths so I understand if its not feasible, just wanted to bring it up.

[peterbe]

If you can correct that, I think it would make a big improvements. I’ve noticed little imperfections like that too and it looks kinda “sloppy” which leaves a bad taste. It shouldn’t matter, but it does. We’re just fancy monkeys.

[tannerdolby]

@Ryuno-Ki Sounds good. Thank you for the clarification.