diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss index f6cc2689e1..67c4a88a43 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss +++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss @@ -27,7 +27,7 @@ } .ThreadViewer & { - padding-top: 12px; + padding-top: 0px; .AutoHeight { position: absolute; diff --git a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss index 1604e7f1f4..a709bd136f 100644 --- a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss +++ b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss @@ -9,6 +9,7 @@ } .post-list__dynamic--RHS { + padding-bottom: 8px; scrollbar-color: var(--center-channel-color-32) #fff0; scrollbar-width: thin; } diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.scss b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.scss new file mode 100644 index 0000000000..3bb9c172cf --- /dev/null +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.scss @@ -0,0 +1,7 @@ +.virtual-list{ + &__ctr{ + display: flex; + height: 100%; + flex-direction: column; + } +} \ No newline at end of file diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx index 7a5cddc258..871c2d0e6e 100644 --- a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx @@ -26,6 +26,7 @@ import type {FakePost} from 'types/store/rhs'; import CreateComment from './create_comment'; import Row from './thread_viewer_row'; +import './virtualized_thread_viewer.scss'; type Props = { currentUserId: string; @@ -45,7 +46,6 @@ type Props = { } type State = { - createCommentHeight: number; isScrolling: boolean; topRhsPostId?: string; userScrolledToBottom: boolean; @@ -58,9 +58,11 @@ type State = { const virtListStyles = { position: 'absolute', - top: '0', - height: '100%', - willChange: 'auto', + willChange: 'transform', + overflowY: 'auto', + overflowAnchor: 'none', + bottom: '0px', + maxHeight: '100%', }; const innerStyles = { @@ -81,6 +83,11 @@ const THREADING_TIME: typeof BASE_THREADING_TIME = { }; const OFFSET_TO_SHOW_TOAST = -50; + +// To handle issue caused by slight difference in scrollHeight and scrollOffset + clientHeight of virtaulized list +// we add a buffer to the scrollOffset +const SCROLL_OFFSET_BUFFER = 5; + const OVERSCAN_COUNT_FORWARD = 80; const OVERSCAN_COUNT_BACKWARD = 80; @@ -88,7 +95,6 @@ class ThreadViewerVirtualized extends PureComponent { private mounted = false; private scrollStopAction: DelayedAction; private scrollShortCircuit = 0; - postCreateContainerRef: RefObject; listRef: RefObject; innerRef: RefObject; initRangeToRender: number[]; @@ -105,11 +111,9 @@ class ThreadViewerVirtualized extends PureComponent { this.listRef = React.createRef(); this.innerRef = React.createRef(); - this.postCreateContainerRef = React.createRef(); this.scrollStopAction = new DelayedAction(this.handleScrollStop); this.state = { - createCommentHeight: 0, isScrolling: false, userScrolledToBottom: false, topRhsPostId: undefined, @@ -184,11 +188,10 @@ class ThreadViewerVirtualized extends PureComponent { if (scrollHeight <= 0) { return; } - const {createCommentHeight} = this.state; const updatedState: Partial = {}; - const userScrolledToBottom = scrollHeight - scrollOffset - createCommentHeight <= clientHeight; + const userScrolledToBottom = scrollHeight - scrollOffset - SCROLL_OFFSET_BUFFER <= clientHeight; if (!scrollUpdateWasRequested) { this.scrollShortCircuit = 0; @@ -350,18 +353,6 @@ class ThreadViewerVirtualized extends PureComponent { a11yIndex++; } - if (isCreateComment(itemId)) { - return ( - - ); - } - return (
{ const {topRhsPostId} = this.state; return ( - <> +
{this.props.isMobileView && topRhsPostId && !this.props.useRelativeTimestamp && ( { )}
- + +
); } } diff --git a/webapp/channels/src/selectors/views/threads.ts b/webapp/channels/src/selectors/views/threads.ts index 583603c27e..97e7c4f00e 100644 --- a/webapp/channels/src/selectors/views/threads.ts +++ b/webapp/channels/src/selectors/views/threads.ts @@ -13,7 +13,7 @@ import {makeGetPostsForIds} from 'mattermost-redux/selectors/entities/posts'; import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams'; import {getThreads} from 'mattermost-redux/selectors/entities/threads'; import {createIdsSelector} from 'mattermost-redux/utils/helpers'; -import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES, CREATE_COMMENT} from 'mattermost-redux/utils/post_list'; +import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES} from 'mattermost-redux/utils/post_list'; import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils'; import {getIsRhsOpen, getSelectedPostId} from 'selectors/rhs'; @@ -149,8 +149,6 @@ export function makeFilterRepliesAndAddSeparators() { out.push(post.id); } - out.push(CREATE_COMMENT); - // Flip it back to newest to oldest return out.reverse(); },