fix: firefox avatar icon styling inconsistency #6614
Merged
+2
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
the issue on FF only:
what is happening:
In Chromium the base position of the icon horizontally is "middle of the avatar" while in Firefox it is "on the left".
I have no idea, why it shown like that. Looks like it applies
justify-self: center
; frommaterial-design-icon
. But that shouldn't happen. Because it is not in a flex container. Chrome shows a warning that this property cannot be applied. But it is actually applied. Screenshot below.Then the icon is moved using absolute position (left: 81px). And because the base position is different, it is different afterwards. 81px is a value used relative to chromium's invalid rendering.
The layout is bad in general. ✅ icon and "Invitation accepted" string are children of a small avatar and then moved via position absolute/relative to a fixed place in pixels, paddings are inconsistent as well. I guess we do that, to make it work for an unstable layout.
If we dont want to spend 1h+ debuging very simple things, we should consider redoing it.