fix(report): align table headings & columns left & right #6063
Conversation
| @@ -907,18 +907,23 @@ summary.lh-passed-audits-summary { | |||
| } | |||
|
|
|||
| .lh-table-column--text, | |||
| .lh-table-column--url, | |||
| .lh-table-column--node { | |||
| text-align: left; | |||
There was a problem hiding this comment.
do we need to write this, or is it the default?
There was a problem hiding this comment.
or i guess for 'td' this'll be redundant but neccessary for the 'th's?
There was a problem hiding this comment.
Yes th center by default I could override the default th behavior
There was a problem hiding this comment.
sg. lets add a comment of /* Looks unnecessary, but mostly for keeping the <th>s left-aligned */
| @@ -907,18 +907,23 @@ summary.lh-passed-audits-summary { | |||
| } | |||
|
|
|||
| .lh-table-column--text, | |||
| .lh-table-column--url, | |||
| .lh-table-column--node { | |||
There was a problem hiding this comment.
can you write a lil script that goes over an LHR and pulls out all these itemTypes? it'll be easier to assert we've accounted for all of them. :)
you could just add in a css comment here.
There was a problem hiding this comment.
Array.from(new Set($$('[class*="lh-table-column--"]').map(el => el.className)))
- lh-table-column--thumbnail
- lh-table-column--url
- lh-table-column--bytes
- lh-table-column--timespanMs
- lh-table-column--ms
- lh-table-column--text
- lh-table-column--empty
- lh-table-column--code
- lh-table-column--node
There was a problem hiding this comment.
does .lh-table-column--code belong in this list?
In this table, the heading is centered, but the lh-code is left aligned:
Summary
It aligns our columns & headings correctly.
This is how it looks:
https://codepen.io/wardpeet/full/zJyMGx
Related Issues/PRs
#6049