MM-51528 Fix new messages line overlapping date lines (#23525)

* MM-51528 Fix new messages line overlapping date lines

* Improve clarity of CSS for New Messages and Date separators

* Remove doubled padding above date the New Messages line

* Remove ThreadViewer-specific CSS for separators

webapp/channels/src/components/post/post_component.tsx

@@ -509,10 +509,7 @@ const PostComponent = (props: Props): JSX.Element => {
     }
 
     return (
-        <div
+        <>
-            className={props.location === 'SEARCH' ? 'search-item__container' : undefined}
-            data-testid={props.location === 'SEARCH' ? 'search-item-container' : undefined}
-        >
             {(isSearchResultItem || (props.location !== Locations.CENTER && (props.isPinnedPosts || props.isFlaggedPosts))) && <DateSeparator date={currentPostDay}/>}
             <PostAriaLabelDiv
                 ref={postRef}
@@ -665,7 +662,7 @@ const PostComponent = (props: Props): JSX.Element => {
                     </div>
                 </div>
             </PostAriaLabelDiv>
-        </div>
+        </>
     );
 };
 

webapp/channels/src/components/search_results/post_search_results_item.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {Post} from '@mattermost/types/posts';
+
+import PostComponent from 'components/post';
+
+import {Locations} from 'utils/constants';
+
+type Props = {
+    a11yIndex: number;
+    isFlaggedPosts: boolean;
+    isMentionSearch: boolean;
+    isPinnedPosts: boolean;
+    matches: string[];
+    post: Post;
+    searchTerm: string;
+}
+
+export default function PostSearchResultsItem(props: Props) {
+    return (
+        <div
+            className='search-item__container'
+            data-testid='search-item-container'
+        >
+            <PostComponent
+                post={props.post}
+                matches={props.matches}
+                term={(!props.isFlaggedPosts && !props.isPinnedPosts && !props.isMentionSearch) ? props.searchTerm : ''}
+                isMentionSearch={props.isMentionSearch}
+                a11yIndex={props.a11yIndex}
+                location={Locations.SEARCH}
+            />
+        </div>
+    );
+}

webapp/channels/src/components/search_results/search_results.tsx

@@ -21,17 +21,16 @@ import FileSearchResultItem from 'components/file_search_results';
 import {NoResultsVariant} from 'components/no_results_indicator/types';
 
 import * as Utils from 'utils/utils';
-import {searchHintOptions, DataSearchTypes, Locations} from 'utils/constants';
+import {searchHintOptions, DataSearchTypes} from 'utils/constants';
 import {isFileAttachmentsEnabled} from 'utils/file_utils';
 import {t} from 'utils/i18n';
 
 import {Post} from '@mattermost/types/posts';
 import {FileSearchResultItem as FileSearchResultItemType} from '@mattermost/types/files';
 
-import PostComponent from 'components/post';
-
 import MessageOrFileSelector from './messages_or_files_selector';
 import FilesFilterMenu from './files_filter_menu';
+import PostSearchResultsItem from './post_search_results_item';
 import SearchLimitsBanner from './search_limits_banner';
 
 import type {Props} from './types';
@@ -286,14 +285,15 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
         contentItems = sortedResults.map((item: Post|FileSearchResultItemType, index: number) => {
             if (searchType === DataSearchTypes.MESSAGES_SEARCH_TYPE && !props.isChannelFiles) {
                 return (
-                    <PostComponent
+                    <PostSearchResultsItem
                         key={item.id}
                         post={item as Post}
                         matches={props.matches[item.id]}
-                        term={(!props.isFlaggedPosts && !props.isPinnedPosts && !props.isMentionSearch) ? searchTerms : ''}
+                        searchTerm={searchTerms}
+                        isFlaggedPosts={props.isFlaggedPosts}
                         isMentionSearch={props.isMentionSearch}
+                        isPinnedPosts={props.isPinnedPosts}
                         a11yIndex={index}
-                        location={Locations.SEARCH}
                     />
                 );
             }

webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss

@@ -8,34 +8,11 @@
         text-align: left !important;
     }
 
-    .new-separator {
-        .NotificationSeparator {
-            padding-top: 0;
-        }
-
-        & + .post {
-            padding-top: 1em !important;
-        }
-    }
-
     .post-list__dynamic--RHS {
         scrollbar-color: var(--center-channel-color-32) #fff0;
         scrollbar-width: thin;
     }
 
-    .post-right-comments-container > .new-separator,
-    .post + .new-separator {
-        .NotificationSeparator {
-            padding-top: 1em;
-        }
-    }
-
-    .Separator + .new-separator {
-        .NotificationSeparator {
-            padding-top: 2em;
-        }
-    }
-
     > div {
         flex: 1 1 auto;
     }

webapp/channels/src/sass/components/_post.scss

@@ -2180,8 +2180,12 @@
 }
 
 .post-row__padding {
-    &.top > div:not(.post) {
+    &.bottom .Separator {
-        padding-top: 0;
+        padding-bottom: 1em;
+    }
+
+    &.top .Separator {
+        padding-top: 1em;
     }
 
     &.top .post {