Skip to content

Commit

Permalink
icon missaligment in message fix (#194)
Browse files Browse the repository at this point in the history
* Hi @luoxiaozero,

I've just noticed the same issue as described here (#190) and tracked it down to tailwindcss.  In the output.css generated by it we have:
```
/*
1. Make replaced elements `display: block` by default. (jensimmons/cssremedy#14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (jensimmons/cssremedy#14 (comment))
   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 (983e857) 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
  • Loading branch information
kandrelczyk authored May 17, 2024
1 parent 3edb401 commit 9259bdc
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 1 deletion.
3 changes: 2 additions & 1 deletion thaw/src/icon/icon.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.thaw-icon {
display: inline-block;
}
vertical-align: baseline;
}
1 change: 1 addition & 0 deletions thaw/src/message/message.css
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
}

.thaw-message__icon {
display: flex;
width: 20px;
height: 20px;
margin-right: 10px;
Expand Down

0 comments on commit 9259bdc

Please sign in to comment.