Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icon missaligment in message fix #194

Merged
merged 2 commits into from
May 17, 2024
Merged

icon missaligment in message fix #194

merged 2 commits into from
May 17, 2024

Conversation

kandrelczyk
Copy link
Contributor

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

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.
@luoxiaozero
Copy link
Collaborator

I feel it would be better to set vertical-align to the default value baseline, or to add a display: flex to the thaw-message__icon class to solve this problem.

@kandrelczyk
Copy link
Contributor Author

Hi, changed as you suggested. Tested and it's working.

@luoxiaozero
Copy link
Collaborator

thanks

@luoxiaozero luoxiaozero merged commit 9259bdc into thaw-ui:main May 17, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants