From 9259bdc723cc7c224c900b9f3a72a8a08e4bb415 Mon Sep 17 00:00:00 2001
From: kandrelczyk <cristof@curiana.net>
Date: Fri, 17 May 2024 16:32:29 +0000
Subject: [PATCH] icon missaligment in message fix (#194)

* Hi @luoxiaozero,

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.

* icon missaligment fix
---
 thaw/src/icon/icon.css       | 3 ++-
 thaw/src/message/message.css | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/thaw/src/icon/icon.css b/thaw/src/icon/icon.css
index f941790..1363e76 100644
--- a/thaw/src/icon/icon.css
+++ b/thaw/src/icon/icon.css
@@ -1,3 +1,4 @@
 .thaw-icon {
     display: inline-block;
-}
\ No newline at end of file
+    vertical-align: baseline;
+}
diff --git a/thaw/src/message/message.css b/thaw/src/message/message.css
index 46c3091..997f89e 100644
--- a/thaw/src/message/message.css
+++ b/thaw/src/message/message.css
@@ -105,6 +105,7 @@
 }
 
 .thaw-message__icon {
+    display: flex;
     width: 20px;
     height: 20px;
     margin-right: 10px;