Wrap reaction avatars to avoid "CSS IS AWESØME" (#2904)

source/features/reactions-avatars.css

@@ -2,6 +2,15 @@
 	padding-right: 0.7em !important;
 	padding-left: 0.7em !important;
 }
+button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */
+	border-top: 1px solid #e1e4e8; /* Required when the second line is longer than the first line */
+	border-bottom: 1px solid #e1e4e8; /* Required when the first line is longer than the second line */
+	margin-bottom: -1px; /* Makes up for `order-bottom` */
+}
+.comment-reactions .js-pick-reaction {
+	margin-top: -1px; /* Makes up for `.reaction-summary-item {border-top}` */
+}
+
 .reaction-summary-item.user-has-reacted {
 	--background: #f2f8fa;
 }
@@ -11,12 +20,11 @@
 	height: 2em;
 	border-radius: 3px;
 	margin-top: -0.3em;
-	margin-left: -0.2em;
+	margin-left: -0.5em;
 	vertical-align: middle;
 	background: #efefef; /* Placeholder before the images load */
 	box-shadow: 0 0 0 2px var(--background, #fff);
 	font-size: 10px; /* Base sizer */
-	transition: margin-left 0.2s;
 }
 .reaction-summary-item a:first-of-type {
 	margin-left: 0.5em;
@@ -34,16 +42,3 @@
 	border-radius: inherit;
 	background-color: var(--background);
 }
-
-/* Overlap reaction avatars when there are 5+ types of reactions */
-.rgh-reactions-near-limit .reaction-summary-item:not(:hover) a:not(:first-of-type) {
-	margin-left: -12px;
-}
-/* Avoid wrapping */
-.has-reactions,
-.rgh-reactions-near-limit {
-	display: flex;
-}
-.rgh-reactions-near-limit {
-	background: #fff;
-}

source/features/reactions-avatars.tsx

@@ -65,11 +65,6 @@ function init(): void {
 
 		list.classList.add('rgh-reactions');
 
-		// Overlap reaction avatars when near the avatarLimit
-		if (flatParticipants.length > avatarLimit * 0.9) {
-			list.classList.add('rgh-reactions-near-limit');
-		}
-
 		onUpdatableContentUpdate(list.closest<HTMLElement>('.js-updatable-content')!, init);
 	}
 }