Downgrade react-resizable to avoid duplicating react-draggable depend…

…cy; fix dashboard grid styles

client/app/assets/less/redash/query.less

@@ -269,7 +269,7 @@ a.label-tag {
   display: flex;
   width: 100vw;
 
-  .react-resizable {
+  .resizable-component.react-resizable {
     .react-resizable-handle-horizontal {
       border-right: 1px solid #efefef;
     }

client/app/components/Resizable/index.jsx

@@ -126,6 +126,7 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
 
   return (
     <ReactResizable
+      className="resizable-component"
       axis={direction === "horizontal" ? "x" : "y"}
       resizeHandles={[direction === "horizontal" ? "e" : "s"]}
       handle={resizeHandle}

client/app/components/Resizable/index.less

@@ -1,11 +1,13 @@
 @import (reference, less) "~@/assets/less/inc/variables.less";
 
-.react-resizable {
+.resizable-component.react-resizable {
   position: relative;
 
   .react-resizable-handle {
     position: absolute;
     background: #fff;
+    margin: 0;
+    padding: 0;
 
     display: flex;
     align-items: center;
@@ -19,6 +21,7 @@
     &.react-resizable-handle-horizontal {
       cursor: col-resize;
       width: 10px;
+      height: auto;
       right: 0;
       top: 0;
       bottom: 0;
@@ -35,6 +38,7 @@
 
     &.react-resizable-handle-vertical {
       cursor: row-resize;
+      width: auto;
       height: 10px;
       left: 0;
       right: 0;

client/app/components/dashboards/DashboardGrid.jsx

@@ -9,6 +9,7 @@ import cfg from "@/config/dashboard-grid-options";
 import AutoHeightController from "./AutoHeightController";
 import { WidgetTypeEnum } from "@/services/widget";
 
+import "react-resizable/css/styles.css";
 import "react-grid-layout/css/styles.css";
 import "./dashboard-grid.less";
 

client/app/components/dashboards/dashboard-grid.less

@@ -36,7 +36,8 @@
 
   &.editing-mode {
     /* Y axis lines */
-    background: linear-gradient(to right, transparent, transparent 1px, #F6F8F9 1px, #F6F8F9), linear-gradient(to bottom, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+    background: linear-gradient(to right, transparent, transparent 1px, #f6f8f9 1px, #f6f8f9),
+      linear-gradient(to bottom, #b3babf, #b3babf 1px, transparent 1px, transparent);
     background-size: 5px 50px;
     background-position-y: -8px;
 
@@ -48,7 +49,8 @@
       left: 0;
       bottom: 85px;
       right: 15px;
-      background: linear-gradient(to bottom, transparent, transparent 2px, #F6F8F9 2px, #F6F8F9 5px), linear-gradient(to left, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+      background: linear-gradient(to bottom, transparent, transparent 2px, #f6f8f9 2px, #f6f8f9 5px),
+        linear-gradient(to left, #b3babf, #b3babf 1px, transparent 1px, transparent);
       background-size: calc((100vw - 15px) / 6) 5px;
       background-position: -7px 1px;
     }
@@ -123,11 +125,10 @@
 
 // react-grid-layout overrides
 .react-grid-item {
-
   // placeholder color
   &.react-grid-placeholder {
     border-radius: 3px;
-    background-color: #E0E6EB;
+    background-color: #e0e6eb;
     opacity: 0.5;
   }
 
@@ -142,10 +143,13 @@
   }
 
   // resize handle size
-  & > .react-resizable-handle::after {
-    width: 11px;
-    height: 11px;
-    right: 5px;
-    bottom: 5px;
+  & > .react-resizable-handle {
+    background: none;
+    &:after {
+      width: 11px;
+      height: 11px;
+      right: 5px;
+      bottom: 5px;
+    }
   }
 }

package.json

@@ -79,7 +79,7 @@
     "react-dom": "^16.8.3",
     "react-grid-layout": "git+https://github.com/getredash/react-grid-layout.git",
     "react-pivottable": "^0.9.0",
-    "react-resizable": "^1.10.1",
+    "react-resizable": "^1.8.0",
     "react-sortable-hoc": "^1.10.1",
     "react-virtualized": "^9.21.2",
     "react2angular": "^3.2.1",