From 86689b7ee69b6f914f7ceacd29b2f356a6b1888c Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Fri, 8 Sep 2023 11:50:47 -0400
Subject: [PATCH] MM-54399 Move resizable sidebar handles to not overlap
 scrollbars  (#24491)

* MM-54399 Move resizable sidebar handles to not overlap scrollbars

* Disable RHS resizing in mobile view

* Fix snapshots

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Devin Binnie <devin.binnie@mattermost.com>
---
 .../resizable_sidebar/resizable_divider.tsx          | 12 +++++-------
 .../resizable_sidebar/resizable_lhs/index.tsx        |  3 ---
 .../components/root/__snapshots__/root.test.tsx.snap |  2 +-
 .../sidebar/__snapshots__/sidebar.test.tsx.snap      |  3 ---
 webapp/channels/src/components/sidebar/sidebar.tsx   |  2 --
 .../channels/src/components/sidebar_right/index.ts   |  3 +--
 .../src/components/sidebar_right/sidebar_right.tsx   |  2 +-
 webapp/channels/src/sass/components/_post.scss       |  1 -
 webapp/channels/src/sass/responsive/_tablet.scss     |  3 +--
 9 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/webapp/channels/src/components/resizable_sidebar/resizable_divider.tsx b/webapp/channels/src/components/resizable_sidebar/resizable_divider.tsx
index 8ee79c80d1..349dc7c403 100644
--- a/webapp/channels/src/components/resizable_sidebar/resizable_divider.tsx
+++ b/webapp/channels/src/components/resizable_sidebar/resizable_divider.tsx
@@ -9,6 +9,7 @@ import styled, {createGlobalStyle, css} from 'styled-components';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
+import {getIsMobileView} from 'selectors/views/browser';
 import {useGlobalState} from 'stores/hooks';
 
 import type {CssVarKeyForResizable} from './constants';
@@ -34,19 +35,15 @@ const Divider = styled.div<{isActive: boolean}>`
     position: absolute;
     z-index: 50;
     top: 0;
-    width: 16px;
+    width: 12px;
     height: 100%;
     cursor: col-resize;
     &.left {
-        right: -8px;
+        right: -12px;
     }
 
-    &.right {
-        left: -8px;
-    }
     &::after {
         position: absolute;
-        left: 6px;
         width: 4px;
         height: 100%;
         background-color: ${({isActive}) => (isActive ? 'var(--sidebar-text-active-border)' : 'transparent')};
@@ -103,6 +100,7 @@ function ResizableDivider({
     const cssVarKey = `--${props.globalCssVar}`;
 
     const currentUserID = useSelector(getCurrentUserId);
+    const isMobileView = useSelector(getIsMobileView);
 
     const [isActive, setIsActive] = useState(false);
     const [width, setWidth] = useGlobalState<number | null>(null, `resizable_${name}:`, currentUserID);
@@ -242,7 +240,7 @@ function ResizableDivider({
         setWidth(null);
     };
 
-    if (disabled) {
+    if (disabled || isMobileView) {
         return null;
     }
 
diff --git a/webapp/channels/src/components/resizable_sidebar/resizable_lhs/index.tsx b/webapp/channels/src/components/resizable_sidebar/resizable_lhs/index.tsx
index 5b2527af7f..5e6a59e779 100644
--- a/webapp/channels/src/components/resizable_sidebar/resizable_lhs/index.tsx
+++ b/webapp/channels/src/components/resizable_sidebar/resizable_lhs/index.tsx
@@ -9,12 +9,10 @@ import ResizableDivider from '../resizable_divider';
 
 interface Props extends HTMLAttributes<'div'> {
     children: React.ReactNode;
-    disabled?: boolean;
 }
 
 function ResizableLhs({
     children,
-    disabled,
     id,
     className,
 }: Props) {
@@ -30,7 +28,6 @@ function ResizableLhs({
             <ResizableDivider
                 name={'lhsResizeHandle'}
                 globalCssVar={CssVarKeyForResizable.LHS}
-                disabled={disabled}
                 defaultWidth={DEFAULT_LHS_WIDTH}
                 dir={ResizeDirection.LEFT}
                 containerRef={containerRef}
diff --git a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
index adc7a6a73e..6119c1f261 100644
--- a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
+++ b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`components/Root Routes Should mount public product routes 1`] = `
       <Connect(Pluggable)
         pluggableName="Global"
       />
-      <withRouter(Connect(Component)) />
+      <withRouter(Connect(SidebarRight)) />
       <AppBar />
       <Connect(SidebarRightMenu) />
     </CompassThemeProvider>
diff --git a/webapp/channels/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap b/webapp/channels/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap
index d88256786d..9de1316ce0 100644
--- a/webapp/channels/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`components/sidebar should match empty div snapshot when teamId is missi
 exports[`components/sidebar should match snapshot 1`] = `
 <ResizableLhs
   className=""
-  disabled={false}
   id="SidebarContainer"
 >
   <SidebarHeader
@@ -49,7 +48,6 @@ exports[`components/sidebar should match snapshot 1`] = `
 exports[`components/sidebar should match snapshot when direct channels modal is open 1`] = `
 <ResizableLhs
   className=""
-  disabled={false}
   id="SidebarContainer"
 >
   <SidebarHeader
@@ -97,7 +95,6 @@ exports[`components/sidebar should match snapshot when direct channels modal is
 exports[`components/sidebar should match snapshot when more channels modal is open 1`] = `
 <ResizableLhs
   className=""
-  disabled={false}
   id="SidebarContainer"
 >
   <SidebarHeader
diff --git a/webapp/channels/src/components/sidebar/sidebar.tsx b/webapp/channels/src/components/sidebar/sidebar.tsx
index bb2c599694..5ad4a18d78 100644
--- a/webapp/channels/src/components/sidebar/sidebar.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar.tsx
@@ -234,8 +234,6 @@ export default class Sidebar extends React.PureComponent<Props, State> {
                     'move--right': this.props.isOpen && this.props.isMobileView,
                     dragging: this.state.isDragging,
                 })}
-                disabled={this.props.isMobileView}
-
             >
                 {this.props.isMobileView ? <MobileSidebarHeader/> : (
                     <SidebarHeader
diff --git a/webapp/channels/src/components/sidebar_right/index.ts b/webapp/channels/src/components/sidebar_right/index.ts
index 25000a37d3..5d7723d15f 100644
--- a/webapp/channels/src/components/sidebar_right/index.ts
+++ b/webapp/channels/src/components/sidebar_right/index.ts
@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {memo} from 'react';
 import {connect} from 'react-redux';
 import {withRouter} from 'react-router-dom';
 import type {RouteComponentProps} from 'react-router-dom';
@@ -77,4 +76,4 @@ function mapDispatchToProps(dispatch: Dispatch) {
     };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(memo(SidebarRight)));
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SidebarRight));
diff --git a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx b/webapp/channels/src/components/sidebar_right/sidebar_right.tsx
index 00a27a3d56..ee93d7d910 100644
--- a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx
+++ b/webapp/channels/src/components/sidebar_right/sidebar_right.tsx
@@ -27,7 +27,7 @@ import {isMac} from 'utils/user_agent';
 
 import type {RhsState} from 'types/store/rhs';
 
-type Props = {
+export type Props = {
     isExpanded: boolean;
     isOpen: boolean;
     channel: Channel;
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 76374c90e6..89bd04875a 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -1757,7 +1757,6 @@
 
     .post__time,
     .post-preview__time {
-        margin-right: 4px;
         font-size: 0.9em;
         opacity: 0.6;
     }
diff --git a/webapp/channels/src/sass/responsive/_tablet.scss b/webapp/channels/src/sass/responsive/_tablet.scss
index c9159f6966..3825479c61 100644
--- a/webapp/channels/src/sass/responsive/_tablet.scss
+++ b/webapp/channels/src/sass/responsive/_tablet.scss
@@ -404,11 +404,10 @@
                     .post__permalink {
                         position: absolute;
                         top: 2px;
-                        left: -18px;
+                        left: -8px;
 
                         .sidebar--right & {
                             top: 1px;
-                            left: -18px;
                         }
                     }