From fd1ee39db43cd1d30de313c117f28fc33a74bc51 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Fri, 20 Dec 2019 15:25:55 -0700
Subject: [PATCH] Fix story message boxes to wrap text properly (#2761)

Need to set the message content width so that
the text knows how to wrap. Also accounts for
when the icon is present to set width to the
correct value so it doesn't shift past the edge
of the message box container.

CORL-802

Co-authored-by: Kim Gardner <kgardnr@gmail.com>
---
 .../stream/tabs/Comments/Stream/MessageBoxContainer.css   | 7 +++++++
 .../stream/tabs/Comments/Stream/MessageBoxContainer.tsx   | 8 +++++++-
 .../tabs/Configure/ConfigureStream/MessageBoxConfig.css   | 8 ++++++++
 .../tabs/Configure/ConfigureStream/MessageBoxConfig.tsx   | 8 +++++++-
 .../stream/__snapshots__/renderMessageBox.spec.tsx.snap   | 8 ++++----
 5 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.css

diff --git a/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.css b/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.css
new file mode 100644
index 000000000..a922aa78d
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.css
@@ -0,0 +1,7 @@
+.withIcon {
+  width: calc(100% - 18px - var(--spacing-3));
+}
+
+.withoutIcon {
+  width: 100%;
+}
diff --git a/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.tsx
index dd80d41f2..f537e8bb9 100644
--- a/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.tsx
@@ -10,6 +10,8 @@ import {
 
 import { MessageBoxContainer_story as StoryData } from "coral-stream/__generated__/MessageBoxContainer_story.graphql";
 
+import styles from "./MessageBoxContainer.css";
+
 interface Props {
   story: StoryData;
   className?: string;
@@ -24,7 +26,11 @@ const MessageBoxContainer: FunctionComponent<Props> = ({
       {story.settings.messageBox.icon && (
         <MessageBoxIcon>{story.settings.messageBox.icon}</MessageBoxIcon>
       )}
-      <MessageBoxContent>
+      <MessageBoxContent
+        className={
+          story.settings.messageBox.icon ? styles.withIcon : styles.withoutIcon
+        }
+      >
         {story.settings.messageBox.content || ""}
       </MessageBoxContent>
     </MessageBox>
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.css b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.css
index b2600ca45..513a8d2a2 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.css
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.css
@@ -1,3 +1,11 @@
 .preview {
   text-transform: uppercase;
 }
+
+.withIcon {
+  width: calc(100% - 18px - var(--spacing-3));
+}
+
+.withoutIcon {
+  width: 100%;
+}
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx
index 1c8dc0db5..5df6f1917 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx
@@ -95,7 +95,13 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                             <MessageBoxIcon>{iconInput.value}</MessageBoxIcon>
                           )}
                           {/* Using a zero width join character to ensure that the space is used */}
-                          <MessageBoxContent>
+                          <MessageBoxContent
+                            className={
+                              iconInput.value
+                                ? styles.withIcon
+                                : styles.withoutIcon
+                            }
+                          >
                             {contentInput.value || "&nbsp;"}
                           </MessageBoxContent>
                         </MessageBox>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index c05842306..ae0fe29d0 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -74,7 +74,7 @@ exports[`renders message box when commenting disabled 1`] = `
             chat
           </i>
           <div
-            className="Markdown-root MessageBoxContent-root"
+            className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "<p><strong>What do you think</strong>?</p>
@@ -279,7 +279,7 @@ exports[`renders message box when logged in 1`] = `
           chat
         </i>
         <div
-          className="Markdown-root MessageBoxContent-root"
+          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<p><strong>What do you think</strong>?</p>
@@ -597,7 +597,7 @@ exports[`renders message box when not logged in 1`] = `
           chat
         </i>
         <div
-          className="Markdown-root MessageBoxContent-root"
+          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<p><strong>What do you think</strong>?</p>
@@ -889,7 +889,7 @@ exports[`renders message box when story isClosed 1`] = `
         className="MessageBox-root coral coral-createComment-message PostCommentFormClosed-messageBox"
       >
         <div
-          className="Markdown-root MessageBoxContent-root"
+          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withoutIcon"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<p><strong>What do you think</strong>?</p>