Fix drop indicator when Grid is scrolled (#9417)

Now the DnD events are listened from tablewrapper element,
which contains also grid's header and footer, making it possible to
drop on top of them.

1 files changed, 7 insertions, 10 deletions

diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
index 2f6be4a584..fdc4eff73f 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
@@ -832,7 +832,7 @@ $v-grid-drag-indicator-color: $v-focus-color;
 
   // Drag and drop
   .#{$primary-stylename}-row-drag-top, .#{$primary-stylename}-row-drag-bottom, .#{$primary-stylename}-row-drag-bottom {
-    z-index: 100;
+    z-index: 100; // based on what else z-indexes are in grid/escalator
   }
 
   .#{$primary-stylename}-row-drag-top:before,
@@ -855,6 +855,10 @@ $v-grid-drag-indicator-color: $v-focus-color;
     top: -1px;
   }
 
+  .#{$primary-stylename}-row-drag-top:first-child:before {
+    top: 0;
+  }
+
   .#{$primary-stylename}-row-drag-center:after {
     content: "";
     position: absolute;
@@ -877,28 +881,21 @@ $v-grid-drag-indicator-color: $v-focus-color;
     }
   }
 
-  // Expand Grid's body to cover the whole Grid
-  .#{$primary-stylename}-body-droptarget {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
   // Show drop hint when the grid is empty or,
   // if the DropMode.ON_TOP is used and dragging below last row
   .#{$primary-stylename}-body-drag-top:after {
     content: "";
     position: absolute;
     top: 0;
-    right: 2px;
+    right: 0;
     bottom: 0;
     left: 0;
     pointer-events: none;
     border: 2px solid $v-grid-drag-indicator-color;
+    z-index: 100; // based on what else z-indexes are in grid/escalator
   }
 }
 
-
 @include keyframes(valo-grid-editor-footer-animate-in) {
   0% {
     margin-top: -$v-grid-row-height;