UX: adjust various avatars due to size changes (#21890)

app/assets/javascripts/discourse/app/widgets/topic-map.js

@@ -263,7 +263,7 @@ createWidget("topic-map-summary", {
       })
     );
 
-    return [nav, h("ul.clearfix", contents)];
+    return [nav, h("ul", contents)];
   },
 });
 
@@ -311,7 +311,7 @@ createWidget("topic-map-expanded", {
     let avatars;
 
     if (attrs.participants && attrs.participants.length > 0) {
-      avatars = h("section.avatars.clearfix", [
+      avatars = h("section.avatars", [
         h("h3", I18n.t("topic_map.participants_title")),
         renderParticipants.call(this, attrs.userFilters, attrs.participants),
       ]);

app/assets/stylesheets/common/base/compose.scss

@@ -120,11 +120,9 @@ html.composer-open {
       width: auto;
       max-width: 100%;
 
-      .avatar {
-        width: 20px;
-      }
-
       .action-title {
+        display: flex;
+        align-items: center;
         line-height: normal;
         @include ellipsis;
       }

app/assets/stylesheets/common/base/topic-post.scss

@@ -674,10 +674,18 @@ aside.quote {
   border-top: none; // would cause double top border
 
   .avatars {
-    > div {
-      float: left;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    box-sizing: border-box;
+    a {
+      display: block;
       position: relative;
-      margin: 3px 0;
+    }
+
+    .avatar {
+      width: 2.5em;
+      height: 2.5em;
     }
     .post-count {
       position: absolute;
@@ -692,8 +700,7 @@ aside.quote {
   }
 
   .avatar {
-    float: left;
-    margin-right: 4px;
+    margin-right: 0.33em;
   }
 
   section {
@@ -701,12 +708,15 @@ aside.quote {
   }
 
   ul {
+    display: flex;
+    flex-wrap: wrap;
     margin: 0;
     list-style: none;
   }
 
   h3 {
-    margin-bottom: 4px;
+    width: 100%;
+    margin-bottom: 0.33em;
     color: var(--primary);
     line-height: var(--line-height-large);
     font-weight: normal;

app/assets/stylesheets/common/components/user-card.scss

@@ -1,8 +1,10 @@
 @use "sass:math";
 
-$card_width: 580px;
-$avatar_width: 120px;
-$avatar_margin: -50px; // negative margin makes avatars extend above cards
+.user-card {
+  --card-width: 39em;
+  --avatar-width: 8em;
+  --avatar-margin: -3.3em; // extends the avatar above the card
+}
 
 .animated-placeholder {
   height: 20px;
@@ -10,8 +12,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
 }
 
 .card-avatar-placeholder {
-  width: $avatar_width;
-  height: $avatar_width;
+  width: var(--avatar-width);
+  height: var(--avatar-width);
   border-radius: 100%;
   position: relative;
   overflow: hidden;
@@ -26,15 +28,15 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       var(--primary-low) 18%,
       var(--primary-very-low) 33%
     );
-    height: $avatar_width;
-    width: $card_width;
+    height: var(--avatar-width);
+    width: var(--card-width);
   }
 }
 
 // shared styles for user and group cards
 .user-card,
 .group-card {
-  width: $card_width;
+  width: var(--card-width);
   box-shadow: shadow("card");
   color: var(--primary);
   background: var(--secondary) center center;
@@ -140,12 +142,16 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   .first-row {
     display: flex;
     .avatar-placeholder {
-      width: $avatar_width;
-      height: $avatar_width;
+      width: var(--avatar-width);
+      height: var(--avatar-width);
     }
     .user-card-avatar {
-      margin-top: $avatar_margin;
-      max-height: $avatar_width;
+      margin-top: var(--avatar-margin);
+      max-height: var(--avatar-width);
+    }
+    .avatar {
+      width: 100%;
+      height: 100%;
     }
     .new-user a {
       color: var(--primary-low-mid);
@@ -257,18 +263,18 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   .first-row {
     display: flex;
     .group-card-avatar {
-      margin-top: $avatar_margin;
+      margin-top: var(--avatar-margin);
     }
     .avatar-flair {
       display: flex;
       background-size: contain;
       background-repeat: no-repeat;
-      width: $avatar_width;
-      height: $avatar_width;
+      width: var(--avatar-width);
+      height: var(--avatar-width);
       color: var(--primary);
       .d-icon {
         margin: auto;
-        font-size: math.div($avatar_width, 1.5);
+        font-size: math.div(var(--avatar-width), 1.5);
       }
       &.rounded {
         border-radius: 50%;

app/assets/stylesheets/mobile/components/user-card.scss

@@ -1,5 +1,3 @@
-$avatar_width: 120px;
-
 // shared styles for user and group cards
 .user-card,
 .group-card {
@@ -12,13 +10,16 @@ $avatar_width: 120px;
   .first-row {
     flex-wrap: wrap;
     .names {
-      flex: 1 1 calc(100% - #{$avatar_width});
+      flex: 1 1 auto;
       box-sizing: border-box;
     }
+    .user-card-avatar {
+      flex: 0 0 auto;
+    }
     .usercard-controls {
+      width: 100%; // always wraps to next line
       --usercard-control-margin: 0.25em;
       display: flex;
-      flex: 1;
       flex-wrap: wrap;
       margin: 1em calc(var(--usercard-control-margin) * -1) 0;
       li {