From f974490ff09c36e94a93182604b69106d4971ae5 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 5 Oct 2021 14:27:55 -0400
Subject: [PATCH] Add some spacing for +10 reactions

---
 stylesheets/_modules.scss                     |  1 +
 .../conversation/Message.stories.tsx          | 46 +++++++------------
 2 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 9f87f789b3..fff35982e7 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1315,6 +1315,7 @@
 
   &--with-count {
     min-width: 40px;
+    padding: 0 6px;
   }
 
   &__count {
diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
index 4a2dac6596..dad12c0f0b 100644
--- a/ts/components/conversation/Message.stories.tsx
+++ b/ts/components/conversation/Message.stories.tsx
@@ -30,6 +30,19 @@ import { getDefaultConversation } from '../../test-both/helpers/getDefaultConver
 
 const i18n = setupI18n('en', enMessages);
 
+function getJoyReaction() {
+  return {
+    emoji: '😂',
+    from: getDefaultConversation({
+      id: '+14155552674',
+      phoneNumber: '+14155552674',
+      name: 'Amelia Briggs',
+      title: 'Amelia',
+    }),
+    timestamp: Date.now() - 10,
+  };
+}
+
 const story = storiesOf('Components/Conversation/Message', module);
 
 const renderEmojiPicker: Props['renderEmojiPicker'] = ({
@@ -306,16 +319,6 @@ story.add('Reactions (wider message)', () => {
         }),
         timestamp: Date.now() - 10,
       },
-      {
-        emoji: '😂',
-        from: getDefaultConversation({
-          id: '+14155552676',
-          phoneNumber: '+14155552676',
-          name: 'Amelia Briggs',
-          title: 'Amelia',
-        }),
-        timestamp: Date.now() - 10,
-      },
       {
         emoji: '😡',
         from: getDefaultConversation({
@@ -352,11 +355,14 @@ story.add('Reactions (wider message)', () => {
   return renderBothDirections(props);
 });
 
+const joyReactions = Array.from({ length: 52 }, () => getJoyReaction());
+
 story.add('Reactions (short message)', () => {
   const props = createProps({
     text: 'h',
     timestamp: Date.now(),
     reactions: [
+      ...joyReactions,
       {
         emoji: '👍',
         from: getDefaultConversation({
@@ -388,26 +394,6 @@ story.add('Reactions (short message)', () => {
         }),
         timestamp: Date.now(),
       },
-      {
-        emoji: '😂',
-        from: getDefaultConversation({
-          id: '+14155552674',
-          phoneNumber: '+14155552674',
-          name: 'Amelia Briggs',
-          title: 'Amelia',
-        }),
-        timestamp: Date.now(),
-      },
-      {
-        emoji: '😂',
-        from: getDefaultConversation({
-          id: '+14155552676',
-          phoneNumber: '+14155552676',
-          name: 'Amelia Briggs',
-          title: 'Amelia',
-        }),
-        timestamp: Date.now(),
-      },
       {
         emoji: '😡',
         from: getDefaultConversation({