Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix avatar in right panel not using the correct font #11593

Merged
merged 4 commits into from
Sep 11, 2023
Merged

Fix avatar in right panel not using the correct font #11593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86a271e
Fix style
MidhunSureshR Sep 8, 2023
16f3935
Merge branch 'develop' into midhun/fix-26081
MidhunSureshR Sep 8, 2023
224cfb1
Remove previous fix
MidhunSureshR Sep 11, 2023
19e1a36
Merge branch 'develop' into midhun/fix-26081
MidhunSureshR Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions res/css/views/avatars/_BaseAvatar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ limitations under the License.
}

button.mx_BaseAvatar {
/* The user agent stylesheet overrides the font-size & line-height in this scenario
And that breaks the alignment, emojis, and all sorts of things
/* <button> is a form element and by default it uses the user agent (browser) styling.
We want it to inherit the font-family and line-height from its parent.
*/
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
10 changes: 0 additions & 10 deletions res/css/views/right_panel/_UserInfo.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,6 @@ limitations under the License.
margin: 0 auto;
transition: 0.5s;

.mx_BaseAvatar {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the styles added in 4a75393 because it was a problem with font-family: inherit being incorrectly written as font-size: inherit that caused the font to be tiny rather than a problem with the font calculation in compound.

/* Override the calculated font-size so that the letter isn't tiny */
font-size: 4rem;
}

.mx_BaseAvatar,
.mx_BaseAvatar img {
width: 100%;
Expand Down Expand Up @@ -255,11 +250,6 @@ limitations under the License.
max-width: 72px;
margin: 0 auto;
}

.mx_BaseAvatar {
/* Override the calculated font-size so that the letter isn't tiny */
font-size: 2rem;
}
}
}
}