Bug 1380738 - Fix the size of the avatar to avoid reflow. r?eoger
MozReview-Commit-ID: 5MWoxolsiJd
--- a/browser/themes/shared/incontentprefs-old/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs-old/preferences.inc.css
@@ -377,26 +377,28 @@ description > html|a {
min-width: 30ch;
}
/**
* Sync
*/
#fxaProfileImage {
- max-width: 60px;
+ width: 60px;
+ height: 60px;
border-radius: 50%;
list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
margin-inline-end: 15px;
image-rendering: auto;
border: 1px solid transparent;
}
#fxaLoginStatus[hasName] #fxaProfileImage {
- max-width: 80px;
+ width: 80px;
+ height: 80px;
}
#fxaProfileImage.actionable {
cursor: pointer;
}
#fxaProfileImage.actionable:hover {
border-color: #0095DD;
@@ -513,17 +515,18 @@ description > html|a {
#fxaEmailAddress1,
#fxaEmailAddress2,
#fxaEmailAddress3 {
word-break: break-all;
}
.fxaFirefoxLogo {
list-style-image: url(chrome://browser/skin/fxa/logo.png);
- max-width: 64px;
+ width: 64px;
+ height: 64px;
margin-inline-end: 14px;
}
.fxaMobilePromo {
margin-bottom: 20px;
margin-top: 25px;
}
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -397,26 +397,28 @@ groupbox {
min-width: 30ch;
}
/**
* Sync
*/
#fxaProfileImage {
- max-width: 60px;
+ width: 60px;
+ height: 60px;
border-radius: 50%;
list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
margin-inline-end: 15px;
image-rendering: auto;
border: 1px solid transparent;
}
#fxaLoginStatus[hasName] #fxaProfileImage {
- max-width: 80px;
+ width: 80px;
+ height: 80px;
}
#fxaProfileImage.actionable {
cursor: pointer;
}
#fxaProfileImage.actionable:hover {
border-color: #0095DD;
@@ -533,17 +535,18 @@ groupbox {
#fxaEmailAddress1,
#fxaEmailAddress2,
#fxaEmailAddress3 {
word-break: break-all;
}
.fxaFirefoxLogo {
list-style-image: url(chrome://browser/skin/fxa/logo.png);
- max-width: 64px;
+ width: 64px;
+ height: 64px;
margin-inline-end: 14px;
}
.fxaMobilePromo {
margin-bottom: 20px;
margin-top: 25px;
}