Notice: content is not vertically aligned with the AlertIcon

[jvalente]

🐛 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/reactist version: 11.0.0
• react version: ^16.13.1
• Browser: Firefox @ Windows 10

[gnapse]

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.

[jvalente]

Hello @gnapse, I am able to reproduce this issue on Windows 10, non-retina display. Both Chrome and Firefox.

[gnapse]

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.

[gnapse]

@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"?

[henningmu]

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 👀

[gnapse]

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.