report: use css grid for metrics #9273
Conversation
| @@ -570,10 +566,9 @@ | |||
| } | |||
|
|
|||
| .lh-metric__innerwrap { | |||
| display: flex; | |||
| display: grid; | |||
| grid-template-columns: 1fr 80% 20%; | |||
There was a problem hiding this comment.
wait what's the need for 3 columns, aren't we just using two?
There was a problem hiding this comment.
also what is the value of 1fr when we've supposedly already used up 100% of the available width...
There was a problem hiding this comment.
the first column is the score icon
1fr is a nice way to say "give this some minimum space" but still assigned the 2nd and 3rd columns with percentages that add up to 100
There was a problem hiding this comment.
i was definitely hoping it would be that easy.. alas...
with long content it will overhang the parent container width.
i think something more like this will work better:
grid-template-columns: var(--audit-description-padding-left) 10fr 3fr;
separately... the metric value should be right aligned (we got it for free in flex land)
|
@paulirish bump |
| @@ -593,13 +588,15 @@ | |||
|
|
|||
| .lh-metric__description { | |||
| display: none; | |||
| grid-column-start: 1; | |||
| grid-column-end: 3; | |||
There was a problem hiding this comment.
looking at https://yuinchien.com/sandbox/lighthouse/
it seems this is currently misaligned...
perhaps:
grid-column-start: 2;
grid-column-end: 4;? i dont really know grid though... can you doublecheck?
There was a problem hiding this comment.
ya that did the trick
Before:
See #9270
After:
Note, I merged #9272 into this changeset b/c the grid styles here require that the score icon is always present and visible.