Dialog: resizable at 400% shows weird scroll bar

[AndreasSamjeske]

Description

Opening a resizable dialog on 400% zoom shows a scroll bar outside of the dialog. Since the dialog is resizbale, the mouse cursor changes to its resize icon in the area of the scroll bar. In Chrome and Firefox you are unable to scroll the scroll bar by clicking our dragging. Dragging the dialogs edge seems to be predominant.
In Firefox you are able to do both at once:

• dragging horizontally changes dialogs width (as expected)
• dragging vertically scrolls inside the dialog. Kinda expected as well, but not at the same time.

Scrolling by mouse wheel works fine.

Expected outcome

Scroll bar shall be accessible by mouse click and drag in all browsers.

Minimal reproducible example

Demo in vaadin docs will do:
https://vaadin.com/docs/latest/components/dialog#resizable

Steps to reproduce

1. Screen with 1080px to 1200px in height with scaling at 100%.
2. Open resizable dialog demo in new tab
3. Set zoom in browser to 400% by CTRL and +
4. Click open dialog
5. Try to scroll the dialog vertically by mouse click or drag.

Environment

Vaadin version(s): 24
OS: Windows 11

Browsers

Chrome, Firefox, Edge