Clamp reaction content width to at most 100px

Part of https://github.com/vector-im/riot-web/issues/10256

res/css/views/messages/_ReactionsRowButton.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_ReactionsRowButton {
-    display: inline-block;
+    display: inline-flex;
     height: 20px;
     line-height: 21px;
     margin-right: 6px;
@@ -35,3 +35,11 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 }
+
+.mx_ReactionsRowButton_content {
+    max-width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 4px;
+}

src/components/views/messages/ReactionsRowButton.js

@@ -101,7 +101,12 @@ export default class ReactionsRowButton extends React.PureComponent {
             onMouseOver={this.onMouseOver}
             onMouseOut={this.onMouseOut}
         >
-            {content} {count}
+            <span className="mx_ReactionsRowButton_content">
+                {content}
+            </span>
+            <span className="mx_ReactionsRowButton_count">
+                {count}
+            </span>
             {tooltip}
         </span>;
     }