PLT-5356 - Fixing margins for paragraphs (#5217)

* PLT-5356 - Fixing margins for paragraphs

* Fixing conflict

* Fixing font size for paragraphs

3 files changed, 20 insertions, 19 deletions

diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 614ba6005..24baaa09c 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -313,6 +313,10 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        if (PostUtils.isEdited(this.props.post)) {
+            postClass += ' post--edited';
+        }
+
         let systemMessageClass = '';
         if (isSystemMessage) {
             systemMessageClass = 'post--system';
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 2942a0efc..5ab0a3956 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -341,6 +341,7 @@ export default class RhsRootPost extends React.Component {
         }
 
         let compactClass = '';
+        let postClass = '';
         if (this.props.compactDisplay) {
             compactClass = 'post--compact';
 
@@ -362,6 +363,10 @@ export default class RhsRootPost extends React.Component {
             }
         }
 
+        if (PostUtils.isEdited(this.props.post)) {
+            postClass += ' post--edited';
+        }
+
         const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
 
         let flag;
@@ -447,11 +452,13 @@ export default class RhsRootPost extends React.Component {
                             </li>
                         </ul>
                         <div className='post__body'>
-                            <PostBodyAdditionalContent
-                                post={post}
-                                message={<PostMessageContainer post={post}/>}
-                                previewCollapsed={this.props.previewCollapsed}
-                            />
+                            <div className={postClass}>
+                                <PostBodyAdditionalContent
+                                    post={post}
+                                    message={<PostMessageContainer post={post}/>}
+                                    previewCollapsed={this.props.previewCollapsed}
+                                />
+                            </div>
                             {fileAttachment}
                             <ReactionListContainer
                                 post={post}
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 0f72a7f26..c24b77185 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -717,32 +717,22 @@
     .post--edited {
         p {
             &:last-child {
-                display: inline;
+                display: inline-block;
             }
         }
     }
 
     p {
-        font-size: .97em;
+        font-size: 13.5px;
         line-height: 1.6em;
         margin: 0;
         white-space: pre-wrap;
-
-        &:last-child {
-            margin-bottom: .5em;
-        }
     }
 
     .post__header--info {
         padding: 0;
     }
 
-    span {
-        p:last-child {
-            margin-bottom: .5em;
-        }
-    }
-
     &.post--root {
         .comment-icon__container {
             visibility: visible;
@@ -1023,7 +1013,7 @@
         }
 
         p + p {
-            margin: 1.2em 0;
+            margin: 1.2em 0 0;
 
             &:last-of-type {
                 margin-bottom: 0;
@@ -1036,7 +1026,7 @@
 
         ul,
         ol {
-            font-size: .97em;
+            font-size: 13.5px;
             margin-bottom: .4em;
             padding-left: 20px;