Fix #4035 Not easy to scroll dashboards on mobile (#4115)

* fix #4035

* tests added

(cherry picked from commit e16faab)

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"}

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: () => {}