Text and icon are misaligned when changing font size

[Janglee123]

When you change font size of the console, icons are not lined with text or in other words icons are not centered vertically. Changing Icon height with font size doesn't solve issue. I tried to multiply icon height with some number (like 1.5*fontsize) to align it vertically but it is not working for all sizes.

Here is demo

[AnkurIngale]

Can you look into this?

I tried this and they are pretty much close to each other. But the problem is, different icons and text are set differently making it very difficult for all of them to come together.

[AnkurIngale]

https://codesandbox.io/s/rl7pk9w2ym Also on testing the same here, the problem is with the react console-feed itself. Therefore, we need some sort of mapping function which maps padding to fontsize. That will do the job.

[Janglee123]

@AnkurIngale I think mapping values are not a proper solution. If you want to help just clone the repo and find what is going wrong. I suspect this line. Fix it by changing to something else.

[matthewoates]

They're also blurry on displays where the physical pixel ratio is > 1, which is pretty much every device now.

[matthewoates]

rich objects have similar positioning issues. eg: console.log('deep object', { foo: { bar: { baz: 1234, qux: 'ok' }}});