Fix messages white-space

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 74c343f6d25dce8619fcd70c957ec031c7a06e88..2c6c7cf63da197c1c5c52e475dd40a34f4420465 100644 (file)
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -169,7 +169,7 @@ const MessageBody = React.memo(({
 
   const content = isCustomHTML
     ? twemojify(sanitizeCustomHtml(body), undefined, true, false)
-    : twemojify(body, undefined, true);
+    : <p>{twemojify(body, undefined, true)}</p>;
 
   return (
     <div className="message__body">

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 1011926bca7365df5b1f0bb0f3387bc62855e74d..6b0e47639b0f338d550a8dfd8380bb32f8d06294 100644 (file)
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -180,6 +180,10 @@
 .message__body {
   word-break: break-word;
 
+  & > .text > * {
+    white-space: pre-wrap;
+  }
+
   & a {
     word-break: break-word;
   }
@@ -331,19 +335,19 @@
   & h1,
   & h2 {
     color: var(--tc-surface-high);
-    margin: var(--sp-extra-loose) 0 var(--sp-normal);
+    margin: var(--sp-loose) 0 var(--sp-normal);
     line-height: var(--lh-h1);
   }
   & h3,
   & h4 {
     color: var(--tc-surface-high);
-    margin: var(--sp-loose) 0 var(--sp-tight);
+    margin: var(--sp-normal) 0 var(--sp-tight);
     line-height: var(--lh-h2);
   }
   & h5,
   & h6 {
     color: var(--tc-surface-high);
-    margin: var(--sp-normal) 0 var(--sp-extra-tight);
+    margin: var(--sp-tight) 0 var(--sp-extra-tight);
     line-height: var(--lh-s1);
   }
   & hr {