diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index ee92f2a5e..963d73106 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -339,3 +339,13 @@ background: unset; } } + +.resize-handle { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 0.25rem; + z-index: var(--z-resize-handle); + cursor: var(--custom-cursor, ew-resize); +} diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 681310c61..81c2c3c4b 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -208,7 +208,7 @@ function MiddleColumn({ } = getActions(); const { width: windowWidth } = useWindowSize(); - const { isTablet } = useAppLayout(); + const { isTablet, isDesktop } = useAppLayout(); const lang = useLang(); const [dropAreaState, setDropAreaState] = useState(DropAreaState.None); @@ -464,12 +464,14 @@ function MiddleColumn({ `} onClick={(isTablet && isLeftColumnShown) ? handleTabletFocus : undefined} > -
+ {isDesktop && ( + + )}