fix: prevent grid body from expanding on dragover (#2204)

src/vaadin-grid.html

@@ -266,14 +266,15 @@
      * `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
@@ -770,6 +771,7 @@
         }
 
         this._toggleAttribute('first', index === 0, row);
+        this._toggleAttribute('last', index === this._effectiveSize - 1, row);
         this._toggleAttribute('odd', index % 2, row);
         this._a11yUpdateRowRowindex(row, index);
         this._getItem(index, row);

test/basic.html

@@ -317,6 +317,20 @@
         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 lastRowCell = grid.shadowRoot.querySelector('[part~="row"][last] td');
+        const lastRowSlot = lastRowCell.firstElementChild;
+        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 lastRowCell = grid.shadowRoot.querySelector('[part~="row"][last] td');
+        const lastRowSlot = lastRowCell.firstElementChild;
+        expect(lastRowSlot.assignedNodes()[0].textContent).to.equal(String(grid.size - 1));
+      });
+
       it('should keep row position after hiding/unhiding Grid', () => {
         grid._scrollToIndex(100);
 

test/visual/test.js

@@ -128,6 +128,15 @@ gemini.suite('vaadin-grid', (rootSuite) => {
             grid.$.items.children[1].removeAttribute('dragover');
             grid.$.items.children[1].setAttribute('dragstart', '123');
           });
+        })
+        .capture('dragstart-below-last-row-all-rows-visible', {}, (actions) => {
+          actions.executeJS(function(window) {
+            var grid = window.document.querySelector('vaadin-grid');
+            grid.allRowsVisible = true;
+            grid.items = grid.items.slice(0, 2);
+            grid.$.items.children[1].removeAttribute('dragstart');
+            grid.$.items.children[1].setAttribute('dragover', 'below');
+          });
         });
     });
   });

theme/lumo/vaadin-grid-styles.html

@@ -118,6 +118,10 @@
         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%;

theme/material/vaadin-grid-styles.html

@@ -160,6 +160,10 @@
         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%;