fix: prevent grid body from expanding on dragover

packages/grid/src/vaadin-grid.d.ts

@@ -308,14 +308,15 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
- * * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
  * `details-opened` | Row with details open | row
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row

packages/grid/src/vaadin-grid.js

@@ -194,14 +194,15 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
- * * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
  * `details-opened` | Row with details open | row
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row
@@ -489,6 +490,7 @@ class Grid extends ElementMixin(
       const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
       virtualizer.size = effectiveSize;
+      virtualizer.update();
       virtualizer.flush();
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
@@ -821,6 +823,7 @@ class Grid extends ElementMixin(
     }
 
     row.toggleAttribute('first', index === 0);
+    row.toggleAttribute('last', index === this._effectiveSize - 1);
     row.toggleAttribute('odd', index % 2);
     this._a11yUpdateRowRowindex(row, index);
     this._getItem(index, row);

packages/grid/test/basic.test.js

@@ -206,6 +206,18 @@ describe('basic features', () => {
     expect(parseInt(window.getComputedStyle(grid).getPropertyValue('flex-grow'))).to.equal(1);
     expect(window.getComputedStyle(grid).getPropertyValue('flex-basis')).to.equal('auto');
   });
+
+  it('should have attribute last on the last body row', () => {
+    grid.scrollToIndex(grid.size - 1);
+    const lastRowSlot = grid.shadowRoot.querySelector('[part~="row"][last] slot');
+    expect(lastRowSlot.assignedNodes()[0].textContent).to.equal(String(grid.size - 1));
+  });
+
+  it('should have attribute last on the last body row after resize', () => {
+    grid.size = 2;
+    const lastRowSlot = grid.shadowRoot.querySelector('[part~="row"][last] slot');
+    expect(lastRowSlot.assignedNodes()[0].textContent).to.equal(String(grid.size - 1));
+  });
 });
 
 describe('flex child', () => {

packages/grid/test/visual/lumo/grid.test.js

@@ -330,5 +330,12 @@ describe('grid', () => {
       element.$.items.children[1].setAttribute('dragstart', '123');
       await visualDiff(element, 'row-dragstart');
     });
+
+    it('dragover below last row when all rows visible', async () => {
+      element.allRowsVisible = true;
+      element.items = element.items.slice(0, 2);
+      element.$.items.children[1].setAttribute('dragover', 'below');
+      await visualDiff(element, 'dragover-below-last-row-all-rows-visible');
+    });
   });
 });

packages/grid/test/visual/material/grid.test.js

@@ -330,5 +330,12 @@ describe('grid', () => {
       element.$.items.children[1].setAttribute('dragstart', '123');
       await visualDiff(element, 'row-dragstart');
     });
+
+    it('dragover below last row when all rows visible', async () => {
+      element.allRowsVisible = true;
+      element.items = element.items.slice(0, 2);
+      element.$.items.children[1].setAttribute('dragover', 'below');
+      await visualDiff(element, 'dragover-below-last-row-all-rows-visible');
+    });
   });
 });

packages/grid/theme/lumo/vaadin-grid-styles.js

@@ -133,6 +133,10 @@ registerStyles(
       margin-top: -1px;
     }
 
+    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+      height: 1px;
+    }
+
     [part~='row'][dragover='above'] [part~='cell']::after {
       top: auto;
       bottom: 100%;

packages/grid/theme/material/vaadin-grid-styles.js

@@ -183,6 +183,10 @@ registerStyles(
       margin-top: -1px;
     }
 
+    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+      height: 1px;
+    }
+
     [part~='row'][dragover='above'] [part~='cell']::after {
       top: auto;
       bottom: 100%;