thaw
thaw copied to clipboard
icon missaligment in message fix
I've just noticed the same issue as described here (https://github.com/thaw-ui/thaw/issues/190) and tracked it down to tailwindcss. In the output.css generated by it we have:
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
Your recent change sets the display to inline-block (https://github.com/thaw-ui/thaw/commit/983e85728a21f0443f1ef0eb02b5da81c54b5ed4) and this collides with the 'vertical-align' set by tailwindcss.
Changing the vertical-align property to 'top' fixes the misalignment so I think the simplest fix is to add 'vertical-align: top' to icon.css. I don't see it affecting anything else so it should be safe.