Issue with "Operator precedence": Missing CSS border in some columns

[brunexgeek]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

What information was incorrect, unhelpful, or incomplete?

This is about the table in the "Table" section. Some lines (except the first) in the second column (Operator type) do not have a left border due to a border-left: 0; CSS entry. This happens when the previous column (Precedence) uses rowspan. This problem does not occur in the last column (Individual operators).

The complete CSS rule for the columns missing the left border (from https://developer.mozilla.org/static/css/main.a43ed10c.chunk.css):

table td:first-child, table th:first-child {
    border-left: 0;
    min-width: 150px;
}

Specific section or headline?

Table

What did you expect to see?

Every row in the second column must have a left border.

Did you test this? If so, how?

Page rendered with Firefox 94.0 (64-bit) under GNU/Linux.

MDN Content page report details

• Folder: en-us/web/javascript/reference/operators/operator_precedence
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/operators/operator_precedence/index.md
• Last commit: mdn/content@80591d2
• Document last modified: 2021-08-15T13:24:35.000Z

[brunexgeek]

Minor correction: the last column is missing the left border in the row for assignments, since in this case all previous columns uses rowspan.

[wbamberg]

Thanks for filing, @brunexgeek ! Moving to the yari repo as it concerns the MDN platform, not content.

[tannerdolby]

Good catch @brunexgeek! You were spot on, the CSS causing issues is within the partial _tables.scss in minimalist:

table td:first-child, table th:first-child {
    border-left: 0;
    min-width: 150px;
}

and specifically its the table td:first-child that is overriding the border-left declaration to be border-left: 0. This is because each new table row <tr> has a <td> element as the first nested element e.g. "first-child" so thats why were seeing each row start off with <td> elements that are missing left borders.

If we remove table td:first-child and keep table th:first-child the table borders will appear for each <td> in table rows as they are no longer being overridden. This .scss source for the partial file _tables.scss is located in mdn/minimalist but the most up-to-date source for minimalist doesn't show the border-left declaration, which makes me think by the time Yari runs a new build (within the next <24hrs most likely) the style changes will be picked up from minimalist and this issue should be resolved.

This is the most up-to-date source for _tables.scss in minimalist (L33-39 and it doesn't have the border-left declaration:

&:first-child {
      min-width: 150px;

      @media #{$mq-small-desktop-and-up} {
        min-width: 200px;
      }
    }

Therefore, whenever Yari does a fresh build, it will pick up the changes in minimalist and this issue will be fixed. And if its not (which I doubt but could happen), we can update styles here in Yari to "patch" the tables until further notice.

[tannerdolby]

And seeing this comment by @schalkneethling, it leads me to believe that whenever the most recent release of minimalist is out of the dependency queue it will be ready for Yari to use and the issue we see of <td> elements within <tr>'s not having a visible border-left style will be fixed, along with other things that are "pending" fixes via minimalist.

[tannerdolby]

Now that the changes from minimalist are being utilized here in Yari, all of the cells in the BCD tables have the appropriate borders and look good!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table

I reckon this is ready to be closed @schalkneethling!