PLT-5484 Reduced scope of CSS rules for (edited) tag (#5599)

* PLT-5484 Reduced scope of CSS rules for (edited) tag

* Reverted accidental change from div tags to spans

2 files changed, 13 insertions, 34 deletions

diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx
index 2682b642e..d097dbe5e 100644
--- a/webapp/components/post_view/components/post_message_view.jsx
+++ b/webapp/components/post_view/components/post_message_view.jsx
@@ -78,7 +78,7 @@ export default class PostMessageView extends React.Component {
         }
 
         return (
-            <span className='edited'>
+            <span className='post-edited-indicator'>
                 <FormattedMessage
                     id='post_message_view.edited'
                     defaultMessage='(edited)'
@@ -93,13 +93,7 @@ export default class PostMessageView extends React.Component {
         }
 
         if (!this.props.enableFormatting) {
-            return (
-                <span>
-                    {this.props.post.message}
-                    &nbsp;
-                    {this.renderEditedIndicator()}
-                </span>
-            );
+            return <span>{this.props.post.message}</span>;
         }
 
         const options = Object.assign({}, this.props.options, {
@@ -119,6 +113,7 @@ export default class PostMessageView extends React.Component {
         return (
             <div>
                 <span
+                    className='post-message__text'
                     onClick={Utils.handleFormattedTextClick}
                     dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}}
                 />
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index ab391fa1d..de45eedd5 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -648,17 +648,8 @@
             }
 
             p + p {
-                margin: 1em 0;
-
-                &:last-of-type {
-                    margin-bottom: 0;
-                }
-            }
-
-            span {
-                > p:first-child {
-                    margin-bottom: 1em;
-                }
+                margin-bottom: 1em;
+                margin-top: 1em;
             }
 
             ol,
@@ -742,10 +733,14 @@
     }
 
     .post--edited {
-        p {
-            &:last-child {
-                display: inline-block;
-            }
+        // If the last paragraph of an edited post is a paragraph, make it inline-block so that the (edited) indicator can be on the same line as it
+        .post-message__text > p:last-child {
+            display: inline-block;
+        }
+
+        .post-edited-indicator {
+            @include opacity(.6);
+            font-size: .87em;
         }
     }
 
@@ -1041,10 +1036,6 @@
 
         p + p {
             margin: 1.2em 0 0;
-
-            &:last-of-type {
-                margin-bottom: 0;
-            }
         }
 
         img {
@@ -1129,13 +1120,6 @@
             }
         }
 
-        span {
-            &.edited {
-                @include opacity(.6);
-                font-size: .87em;
-            }
-        }
-
         .post-reaction-list {
             min-height: 30px;
         }