[dashboard] Panel height is not stable when drag resizing

[sissbruecker]

Description

In specific configurations of the dashboard, the panel height is not stable when drag resizing. I mainly got to reproduce this by setting a smaller --vaadin-dashboard-row-min-height.

Also note that the rowspan of the first panel seems to reset to 1 from the initial 2 once the issue occurs.

Bildschirmaufnahme.2024-10-07.um.15.14.26.mov

Expected outcome

The panel height should be stable while resizing and not change with each mouse move event. rowspan of other panels should not be affected.

Minimal reproducible example

    <vaadin-dashboard editable></vaadin-dashboard>

    <style>
      vaadin-dashboard {
        --vaadin-dashboard-row-min-height: 100px;
        --vaadin-dashboard-col-max-count: 2;
      }

      .content {
        font-size: 80px;
        font-weight: bold;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

    <script type="module">
      import '@vaadin/dashboard';

      const dashboard = document.querySelector('vaadin-dashboard');
      dashboard.items = [
        {
          title: 'Panel 1',
          content: 'Panel 1',
          rowspan: 2
        },
        {
          title: 'Panel 2',
          content: 'Panel 2',
        },
        {
          title: 'Panel 3',
          content: 'Panel 3',
        },
      ];

      dashboard.renderer = (root, _dashboard, { item }) => {
        if (!root.firstElementChild) {
          root.append(document.createElement('vaadin-dashboard-widget'));
        }
        root.firstElementChild.widgetTitle = item.title;
        root.firstElementChild.innerHTML = `
          <div class="content">${item.content}</div>
        `;
      };
    </script>

Steps to reproduce

Use the snippet above, then start resizing the second panel.

Environment

Vaadin version(s): 24.5

Browsers

Chrome, Firefox