Notice: content is not vertically aligned with the AlertIcon
jvalente opened this issue · 6 comments
🐛 Bug report
Current behavior
The Notice component content is not vertically aligned with the AlertIcon
Steps to reproduce the bug
On the reactist playground:
On Twist settings:
Expected behavior
The Notice component content should be vertically aligned with the AlertIcon.
Environment
@doist/reactistversion: 11.0.0reactversion: ^16.13.1- Browser: Firefox @ Windows 10
I cannot reproduce in Twist in production right now. Alignment seems ok to me:
@jvalente can you give more details about how can you reproduce? For instance, I initially tried in Twist staging and I can reproduce it there, but that's likely outdated. The screenshots above were taken in production.
Hello @gnapse, I am able to reproduce this issue on Windows 10, non-retina display. Both Chrome and Firefox.
It does not look the same as the original report. In the original report, the screenshot you posted (the one for Twist, not the one for Reactist's playground) shows the text aligned to the top. These new ones are aligned towards the bottom. I'm still curious about that one, since it was what you initially experienced. I wonder how it's the opposite now.
Anyway, I can reproduce on Windows. I suspect that this is due to a different font being used across these two systems. At least that's the only meaningful difference that I notice. Not sure how to better fix/address this issue. I'll dig in a bit.
@henningmu you brought my attention to this issue, saying this:
I tried it on Friday but gave up after an hour as I wanted to avoid introducing custom CSS. Is that even possible?
😁
Did you have a solution at all? What did you mean with "introducing custom CSS"?
If I remember correctly it was a line-height problem and setting it to the height of the container fixed it. But my memories are not very clear – with that being said, I can't even see the issue anymore
From the discussion above, the issue only happens in Windows. At least in my experience. Not sure how you ever saw it if you only tried on macOS. I may need more time to dig in and see how this can be solved for Windows without breaking it on macOS.