Prevent resizing/moving cards from causing body to scroll horizontally....

Prevent resizing/moving cards from causing body to scroll horizontally. Constrain resize to 1x1 cell

frontend/src/dashboard/components/Dashboard.jsx

@@ -65,7 +65,7 @@ export default class Dashboard extends Component {
         return (
             <LoadingAndErrorWrapper className="Dashboard full-height" loading={!dashboard} error={error}>
             {() =>
-                <div className="full">
+                <div className="full" style={{ overflowX: "hidden" }}>
                     <header className="bg-white border-bottom relative z2">
                         <DashboardHeader {...this.props} />
                     </header>

frontend/src/dashboard/components/grid/GridItem.jsx

@@ -41,8 +41,10 @@ export default class GridItem extends Component {
     onResizeHandler(handlerName) {
       return (e, {element, size}) => {
 
-        if (handlerName !== "onResizeStart") {
-            this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
+        if (handlerName === "onResize") {
+            this.setState({ resizing: size });
+        } if (handlerName === "onResizeStop") {
+            this.setState({ resizing: null });
         }
 
         this.props[handlerName](this.props.i, {e, element, size});
@@ -50,7 +52,7 @@ export default class GridItem extends Component {
     }
 
     render() {
-        let { width, height, top, left } = this.props;
+        let { width, height, top, left, minSize } = this.props;
 
         if (this.state.dragging) {
             left += this.state.dragging.x;
@@ -58,8 +60,8 @@ export default class GridItem extends Component {
         }
 
         if (this.state.resizing) {
-            width = this.state.resizing.width;
-            height = this.state.resizing.height;
+            width = Math.max(minSize.width, this.state.resizing.width);
+            height = Math.max(minSize.height, this.state.resizing.height);
         }
 
         let style = {
@@ -76,8 +78,8 @@ export default class GridItem extends Component {
                 onStop={this.onDragHandler("onDragStop")}
             >
                 <Resizable
-                    width={this.props.width}
-                    height={this.props.height}
+                    width={width}
+                    height={height}
                     onResizeStart={this.onResizeHandler("onResizeStart")}
                     onResize={this.onResizeHandler("onResize")}
                     onResizeStop={this.onResizeHandler("onResizeStop")}

frontend/src/dashboard/components/grid/GridLayout.jsx

@@ -5,6 +5,8 @@ import GridItem from "./GridItem.jsx";
 
 import _ from "underscore";
 
+const MARGIN = 10;
+
 export default class GridLayout extends Component {
     constructor(props, context) {
         super(props, context);
@@ -161,9 +163,17 @@ export default class GridLayout extends Component {
         };
     }
 
+    getMinSize() {
+        let cellSize = this.getCellSize();
+        return {
+            width: cellSize.width - MARGIN,
+            height: cellSize.height - MARGIN
+        }
+    }
+
     getStyleForLayout(l) {
         let cellSize = this.getCellSize();
-        let margin = l.i === "placeholder" ? -10 : 10;
+        let margin = l.i === "placeholder" ? -MARGIN : MARGIN;
         return {
             width: cellSize.width * l.w - margin,
             height: cellSize.height * l.h - margin,
@@ -184,6 +194,7 @@ export default class GridLayout extends Component {
                 onResizeStart={this.onResizeStart}
                 onResize={this.onResize}
                 onResizeStop={this.onResizeStop}
+                minSize={this.getMinSize()}
                 {...l}
                 {...style}
             >