From 2a8f9a81f7cc78affb853209e7800040f7271e1d Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 5 Jul 2019 15:18:53 +0100
Subject: [PATCH 1/2] Allow diplayed reaction values to contain anything

Part of https://github.com/vector-im/riot-web/issues/10256
---
 src/HtmlUtils.js                              | 11 +----------
 src/components/views/messages/ReactionsRow.js |  4 ----
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 73ab28e65ca..fb7a14d6fb8 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -66,19 +66,10 @@ const VARIATION_SELECTOR = String.fromCharCode(0xFE0F);
  * need emojification.
  * unicodeToImage uses this function.
  */
-export function mightContainEmoji(str) {
+function mightContainEmoji(str) {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
-/**
- * Returns true if the string definitely contains a single emoji.
- * @param {String} str String to test
- * @return {Boolean}
- */
-export function isSingleEmoji(str) {
-    return mightContainEmoji(str) && SINGLE_EMOJI_REGEX.test(str);
-}
-
 /**
  * Returns the shortcode for an emoji character.
  *
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 57d2afc4293..0abb1015b99 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import { isSingleEmoji } from '../../../HtmlUtils';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
 // The maximum number of reactions to initially show on a message.
@@ -115,9 +114,6 @@ export default class ReactionsRow extends React.PureComponent {
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
-            if (!isSingleEmoji(content)) {
-                return null;
-            }
             const count = events.size;
             if (!count) {
                 return null;

From eb0e1eade4c696800ce9596a53f63c7b7756f188 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 5 Jul 2019 16:17:17 +0100
Subject: [PATCH 2/2] 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     | 10 +++++++++-
 src/components/views/messages/ReactionsRowButton.js |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 3c6d019b300..e54201d9631 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/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;
+}
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 33325b55927..ac44ec5d56e 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/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>;
     }