From c16f9317f1380ca442f9c843a7709c9b5a9a9432 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 15 May 2023 10:58:06 +0200
Subject: [PATCH] Resizer: Show only on desktops (#3180)

---
 src/components/middle/MiddleColumn.scss | 10 ++++++++++
 src/components/middle/MiddleColumn.tsx  | 16 +++++++++-------
 src/styles/index.scss                   | 20 --------------------
 3 files changed, 19 insertions(+), 27 deletions(-)

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}
     >
-      <div
-        className="resize-handle"
-        onMouseDown={initResize}
-        onMouseUp={handleMouseUp}
-        onDoubleClick={resetResize}
-      />
+      {isDesktop && (
+        <div
+          className="resize-handle"
+          onMouseDown={initResize}
+          onMouseUp={handleMouseUp}
+          onDoubleClick={resetResize}
+        />
+      )}
       <div
         className={bgClassName}
         style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c6b9463f6..f6e74d752 100644
--- a/src/styles/index.scss
+++ b/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;