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(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({ - + 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`] = ` { 'move--right': this.props.isOpen && this.props.isMobileView, dragging: this.state.isDragging, })} - disabled={this.props.isMobileView} - > {this.props.isMobileView ? : (