report(css): use padding for PWA vertical border space #6972
Conversation
| margin: 0 4px; | ||
| } | ||
|
|
||
| .lh-scores-header .lh-gauge--pwa__wrapper { | ||
| margin-right: 4px; | ||
| padding-left: 3px; /* 4px - 1px border */ |
There was a problem hiding this comment.
why do we need to subtract the border? didn't we have 9px of space before with margin-left (4) + margin-right (4) + border (1)
There was a problem hiding this comment.
Yeah it is currently a 9px space. I removed the 1px just to make it 4x4 even because the symmetry is pleasing. It's fair to make it 4x4 + 1px border 🤷♂️ I'm just brining up the concern.
There was a problem hiding this comment.
maybe my CSS math is just off :) but isn't having only 3px of padding making the border spacing asymmetrical? or are you referring to consistent spacing between the category scores?
There was a problem hiding this comment.
It makes the overall spacing symmetrical with the rest of the gauges. Or at least that was my intention.
|
Simplified to just use padding instead of margin 👏 |
Summary
The vertical separator looks squished when looking at small width screens. On large width screens this makes a not very noticable 1px difference 🤷♂️
Don't know if this is WAI, but I wanted to mention it since I thought it looked a bit off.
Current view on min-width screens:
With padding instead of margin: