From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 12 Dec 2021 13:15:43 +0000 (+0530)
Subject: Fix messages white-space
X-Git-Tag: v1.6.0~12
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=e2b347c7834a72f60d3ba868262ee9e8f42afa89;p=rainny.git

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 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 {