fix: do not set touch-action: none on dashboard to allow scroll (#10033)

Author: web-padawan

packages/dashboard/src/styles/vaadin-dashboard-widget-base-styles.js

@@ -56,6 +56,7 @@ const widgetStyles = css`
     inset-inline-end: 0;
     z-index: 1;
     overflow: hidden;
+    touch-action: none;
     cursor: nwse-resize;
     --icon: var(--_vaadin-icon-resize);
   }

packages/dashboard/src/widget-resize-controller.js

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { addListener } from '@vaadin/component-base/src/gestures.js';
+import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { getElementItem, itemsEqual, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 
 /**
@@ -20,6 +20,8 @@ export class WidgetResizeController {
     this.__resizedElementRemoveObserver = new MutationObserver(() => this.__restoreResizedElement());
     this.__touchMoveCancelListener = (e) => e.preventDefault();
     addListener(host, 'track', (e) => this.__onTrack(e));
+    // Do not set touch-action: none to allow scroll on mobile
+    setTouchAction(host, '');
     host.addEventListener('item-resize', (e) => this.__itemResize(e));
   }
 

packages/dashboard/test/dom/__snapshots__/dashboard.test.snap.js

@@ -2,7 +2,7 @@
 export const snapshots = {};
 
 snapshots["vaadin-dashboard host"] = 
-`<vaadin-dashboard style="touch-action: none;">
+`<vaadin-dashboard style="">
   <vaadin-dashboard-widget-wrapper
     slot="slot-0"
     style=""

packages/vaadin-lumo-styles/src/components/dashboard-widget.css

@@ -120,6 +120,7 @@
     bottom: calc(-1 * var(--_resize-button-offset));
     inset-inline-end: calc(-1 * var(--_resize-button-offset));
     cursor: nwse-resize;
+    touch-action: none;
     --icon: var(--lumo-icons-resize-handle);
   }