From ede98484faee7d6d3960229f131f493b9ab16d41 Mon Sep 17 00:00:00 2001
From: vlt1 <54526151+vlt1@users.noreply.github.com>
Date: Fri, 30 Aug 2019 12:20:31 +0300
Subject: [PATCH] Fix #4035 Not easy to scroll dashboards on mobile (#4115)
 (#4120)

* fix #4035

* tests added

(cherry picked from commit e16faabab6ff59ccdff5a71436c79476e9087a77)
---
 .../components/widgets/view/WidgetsView.jsx   |  5 ++++-
 .../view/__tests__/WidgetsView-test.jsx       | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/web/client/components/widgets/view/WidgetsView.jsx b/web/client/components/widgets/view/WidgetsView.jsx
index c924b7ef4c..258da10aec 100644
--- a/web/client/components/widgets/view/WidgetsView.jsx
+++ b/web/client/components/widgets/view/WidgetsView.jsx
@@ -25,6 +25,9 @@ const DefaultWidget = withGroupColor(require('../widget/DefaultWidget'));
 const getWidgetGroups = (groups = [], w) => groups.filter(g => find(g.widgets, id => id === w.id));
 require('react-grid-layout-resize-prevent-collision/css/styles.css');
 
+const WIDGET_MOBILE_RIGHT_SPACE = 34;
+const getResponsiveWidgetWidth = width => width < 480 ? width - WIDGET_MOBILE_RIGHT_SPACE : width;
+
 module.exports = pure(({
     id,
     style,
@@ -56,7 +59,7 @@ module.exports = pure(({
         key={id || "widgets-view"}
         useDefaultWidthProvider={useDefaultWidthProvider}
         measureBeforeMount={measureBeforeMount}
-        width={!useDefaultWidthProvider ? width : undefined}
+        width={!useDefaultWidthProvider ? getResponsiveWidgetWidth(width) : undefined}
         isResizable={canEdit}
         isDraggable={canEdit}
         draggableHandle={".draggableHandle"}
diff --git a/web/client/components/widgets/view/__tests__/WidgetsView-test.jsx b/web/client/components/widgets/view/__tests__/WidgetsView-test.jsx
index 38b1957082..7f3b0e9b51 100644
--- a/web/client/components/widgets/view/__tests__/WidgetsView-test.jsx
+++ b/web/client/components/widgets/view/__tests__/WidgetsView-test.jsx
@@ -9,8 +9,10 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 const expect = require('expect');
+const { Responsive } = require('react-grid-layout-resize-prevent-collision');
 const WidgetsView = require('../WidgetsView');
 const ReactTestUtils = require('react-dom/test-utils');
+
 const dummyWidget = {
     title: "TEST",
     id: "TEST",
@@ -48,6 +50,23 @@ describe('WidgetsView component', () => {
         const el = container.querySelector('.mapstore-widget-card');
         expect(el).toExist();
     });
+    it('Test WidgetsView with width=460', () => {
+        const WIDGET_MOBILE_RIGHT_SPACE = 34;
+        const width = 460;
+        const cmp = ReactDOM.render(<WidgetsView widgets={[dummyWidget]} useDefaultWidthProvider={false} width={width}/>, document.getElementById("container"));
+        expect(cmp).toExist();
+        const innerLayout = ReactTestUtils.findRenderedComponentWithType(cmp, Responsive);
+        expect(innerLayout).toExist();
+        expect(innerLayout.props.width).toEqual(width - WIDGET_MOBILE_RIGHT_SPACE);
+    });
+    it('Test WidgetsView with width=640', () => {
+        const width = 640;
+        const cmp = ReactDOM.render(<WidgetsView widgets={[dummyWidget]} useDefaultWidthProvider={false} width={width}/>, document.getElementById("container"));
+        expect(cmp).toExist();
+        const innerLayout = ReactTestUtils.findRenderedComponentWithType(cmp, Responsive);
+        expect(innerLayout).toExist();
+        expect(innerLayout.props.width).toEqual(width);
+    });
     it('handler editWidget', () => {
         const actions = {
             editWidget: () => {}