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>

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;
     }
 

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}

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>

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

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

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));

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;

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;
     }

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;
                         }
                     }