diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 3c6d019b30..e54201d963 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/HtmlUtils.js b/src/HtmlUtils.js
index 73ab28e65c..fb7a14d6fb 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 57d2afc429..0abb1015b9 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;
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 33325b5592..ac44ec5d56 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}
+
+ {content}
+
+
+ {count}
+
{tooltip}
;
}