reactist icon indicating copy to clipboard operation
reactist copied to clipboard

Published 20 hours ago • verified publisher icon Doist

Notice: content is not vertically aligned with the AlertIcon

Open jvalente opened this issue 3 years ago • 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:

image

On Twist settings:

image

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

jvalente avatar Jan 25 '22 11:01 jvalente

I cannot reproduce in Twist in production right now. Alignment seems ok to me:

image image

@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.

gnapse avatar Feb 01 '22 12:02 gnapse

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

image image

jvalente avatar Feb 01 '22 13:02 jvalente

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 avatar Feb 01 '22 15:02 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"?

gnapse avatar Feb 08 '22 21:02 gnapse

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 👀

henningmu avatar Feb 11 '22 12:02 henningmu

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.

gnapse avatar Feb 11 '22 13:02 gnapse