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

fix: firefox avatar icon styling inconsistency #6614

Merged
merged 1 commit into from
Jan 9, 2025
Merged

Conversation

GretaD
Copy link
Contributor

@GretaD GretaD commented Jan 9, 2025

the issue on FF only:
462-206-max

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; from material-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.
Screenshot from 2025-01-09 13-51-15

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.

@GretaD GretaD added 3. to review Waiting for reviews bug labels Jan 9, 2025
@GretaD GretaD self-assigned this Jan 9, 2025
Copy link

codecov bot commented Jan 9, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 23.41%. Comparing base (c27f067) to head (02e8ed4).
Report is 5 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##               main    #6614   +/-   ##
=========================================
  Coverage     23.41%   23.41%           
  Complexity      472      472           
=========================================
  Files           249      249           
  Lines         11899    11899           
  Branches       2268     2279   +11     
=========================================
  Hits           2786     2786           
  Misses         8786     8786           
  Partials        327      327           
Flag Coverage Δ
javascript 14.85% <ø> (ø)
php 59.45% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ChristophWurst
Copy link
Member

No backport necessary because #6580 wasn't backported either

@GretaD GretaD enabled auto-merge January 9, 2025 14:55
@GretaD GretaD disabled auto-merge January 9, 2025 14:55
@GretaD GretaD added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Jan 9, 2025
@st3iny st3iny merged commit 6fcbef2 into main Jan 9, 2025
38 checks passed
@st3iny st3iny deleted the fix/ff-styling-issues branch January 9, 2025 15:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants