Resizer: Show only on desktops (#3180)

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

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}
     >
-      <div
+      {isDesktop && (
-        className="resize-handle"
+        <div
-        onMouseDown={initResize}
+          className="resize-handle"
-        onMouseUp={handleMouseUp}
+          onMouseDown={initResize}
-        onDoubleClick={resetResize}
+          onMouseUp={handleMouseUp}
-      />
+          onDoubleClick={resetResize}
+        />
+      )}
       <div
         className={bgClassName}
         style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}

src/styles/index.scss

@@ -111,26 +111,6 @@ body.cursor-ew-resize {
   -webkit-user-select: none !important;
 }
 
-.resize-handle {
-  position: fixed;
-  display: none;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: -1;
-
-  @media (min-width: 926px) {
-    position: absolute;
-    display: block;
-    height: auto;
-    bottom: 0;
-    width: 0.25rem;
-    z-index: var(--z-resize-handle);
-    cursor: var(--custom-cursor, ew-resize);
-  }
-}
-
 .clearfix::after {
   content: "";
   clear: both;