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>