Dashboard - Issue of Widget-Drop-Area

[subIT1]

Description

When having the dashboard like in the image below - There are constellations where the drop-area does not appear. So there is enough space but the drop area does only appear when moving some widgets around.

Expected outcome

Every space where enough space for the widget exists should be droppable in each case and not after some other movements.

Minimal reproducible example

Website

Steps to reproduce

See the Image

Environment

Demo-Website

Browsers

Issue is not browser related

[subIT1]

@rolfsmeds i think this is related to you and https://vaadin.com/forum/t/new-dashboard-component-feedback-welcome/167980

[tomivirkki]

The dashed light blue area is the position of the dragged widget in the dashboard, not a dropzone. You can drag the widget over the empty space and the widgets will reorder:

Kapture.2025-01-09.at.13.30.47.mp4

[rolfsmeds]

I mean, technically I think that is the drop area for the widget currently being dragged, in the sense that if you let go of it it drops to where the dashed area is.

But I think what @subIT1 means is that he would want to move the widget to the empty area below the dotted box in his screenshot, which isn't possible with the layout model of the dashboard, which doesn't manage the specific column and row for each widget, but instead just defines the order of widgets, and lets css grid lay them out where they end up based on colspan and the current col count.

Switching to dense mode should fill that gap up automatically though.

[rolfsmeds]

As you can see in @tomivirkki's video, what happens is that the "Visitors by month" widget moves to the place left empty by "A kittykat" when you move the latter on top of another widget in order to take its place in the widget-order.

It would be nice if the dashboard could show a drop area in the empty space, of course (which presumably would require somehow generating elements to fill empty spaces), but the same reshuffling would still take place when you drop, because there's now an empty space to fill.

[subITCSS]

I mean, technically I think that is the drop area for the widget currently being dragged, in the sense that if you let go of it it drops to where the dashed area is.

But I think what @subIT1 means is that he would want to move the widget to the empty area below the dotted box in his screenshot, which isn't possible with the layout model of the dashboard, which doesn't manage the specific column and row for each widget, but instead just defines the order of widgets, and lets css grid lay them out where they end up based on colspan and the current col count.

Switching to dense mode should fill that gap up automatically though.

Right so i moved the "A kittykat!" and i wanted to place it where the "empty-papce" is. But based on the drop-Area i only could place it to it drag-area where it was before.
Additionally when some Widgets around are moved and the same Slot with the "empty-space" exists, then it is possible and there is a mark of the drop-area and the drag-area (which was the "empty-space").