From e2b347c7834a72f60d3ba868262ee9e8f42afa89 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 12 Dec 2021 18:45:43 +0530
Subject: [PATCH] Fix messages white-space

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/message/Message.jsx  |  2 +-
 src/app/molecules/message/Message.scss | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 74c343f..2c6c7cf 100644
--- 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 1011926..6b0e476 100644
--- 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 {