tweak formatting for message content

helps with comment formatting

src/components/social-message/social-message.scss

@@ -18,7 +18,7 @@
 }
 
 .social-message-content {
-    max-width: 60%;
+    max-width: 38.75rem;
 }
 
 a.social-messages-profile-link {

src/views/messages/messages.scss

@@ -101,6 +101,7 @@
 
 .comment-text {
     background-color: $ui-white;
+    max-width: 32.25rem;
 }
 
 .flex-row.mod-comment-message {
@@ -108,6 +109,10 @@
     align-items: flex-start;
 }
 
+.comment-message-info {
+    text-align: left;
+}
+
 .comment-message-info-img {
     width: 40px;
     height: 40px;
@@ -118,6 +123,10 @@
     margin: 1rem auto;
 }
 
+.emoji-text.mod-comment {
+    word-wrap: break-word;
+}
+
 @media only screen and (max-width: $mobile - 1) {
     .flex-row.admin-message-header,
     .flex-row.mod-comment-message {
@@ -125,7 +134,7 @@
     }
 
     .comment-text {
-        max-width: 60%;
+        max-width: 11.75rem;
     }
 }
 
@@ -134,4 +143,14 @@
     .flex-row.mod-comment-message {
         flex-direction: row;
     }
+
+    .comment-text {
+        max-width: 21.5rem;
+    }
+}
+
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .comment-text {
+        max-width: 25.75rem;
+    }
 }