Merge pull request #16032 from mozilla/fix_avatar

fix(content): Avatar in Subscription Management - mobile view

packages/fxa-content-server/app/styles/modules/_avatar.scss

@@ -48,11 +48,9 @@
   // remove when Payments isn't using `avatar-settings-view`
   &.avatar-settings-view {
     border: 2px solid transparent;
-    display: flex;
+    display: block;
     flex-shrink: 0;
     margin: 0;
-    align-items: center;
-    justify-content: center;
 
     &.spinner-completed {
       border: 2px solid $avatar-border-color;
@@ -69,6 +67,18 @@
       width: 50px;
     }
   }
+
+  .profile-image {
+    @include respond-to('big') {
+      height: 64px;
+      width: 64px;
+    }
+
+    @include respond-to('small') {
+      height: 50px;
+      width: 50px;
+    }
+  }
 }
 
 #done {

packages/fxa-payments-server/src/routes/Subscriptions/index.tsx

@@ -545,7 +545,7 @@ const ProfileBanner = ({
 }: ProfileProps) => (
   <header id="fxa-settings-profile-header-wrapper">
     <div className="avatar-wrapper avatar-settings-view nohover">
-      <img src={avatar} alt={displayName || email} className="w-16 h-16" />
+      <img src={avatar} alt={displayName || email} className="profile-image" />
     </div>
     <div id="fxa-settings-profile-header">
       <h1 className="card-header">{displayName ? displayName : email}</h1>