report: improve some usages of css grid

[connorjclark]

I reviewed our usages of CSS grid, and found two things to improve:

drop grid-auto-rows: 1fr on metrics container

minor visual change, stops giving rows all the same height. was no good reason for this i think. it's just more whitespace.

simplify grid-template-columns on inner metric div

we were manually calculating how much space to give the first column by listing out how big that status icon should be. instead, we can just use auto. no visual change

[brendankenny]

drop grid-auto-rows: 1fr on metrics container

it's just more whitespace.

I don't have a strong opinion, but it does look a little more crowded. Should we add some margin to be more deliberate about it?

simplify grid-template-columns on inner metric div

FWIW I do see a visual change

[connorjclark]

drop grid-auto-rows: 1fr on metrics container

it's just more whitespace.

I don't have a strong opinion, but it does look a little more crowded. Should we add some margin to be more deliberate about it?

How's 5px?

simplify grid-template-columns on inner metric div

FWIW I do see a visual change

Ah, yeah the square icon is a slightly smaller width... and removing that makes the square look slightly too large compared to the other shapes :/

I wonder if this entire things is begging for a single grid, as opposed to this grid-ception thing we're doing.

I'll back off on this change. Or we just leave it... it's not something I can notice without flipping the styles back/forth.