wip

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -163,30 +163,24 @@ export const gridStyles = css`
 
   /* Row and cell borders */
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  #header,
-  #footer {
-    &::before {
-      position: absolute;
-      inset-inline: 0;
-      border-block: var(--_row-border-width) solid var(--_border-color);
-      transform: translateX(var(--_grid-horizontal-scroll-position));
-    }
+  [part~='last-header-row']::before,
+  [part~='first-footer-row']::before {
+    position: absolute;
+    inset-inline: 0;
+    border-block: var(--_row-border-width) var(--_border-color);
+    transform: translateX(var(--_grid-horizontal-scroll-position));
   }
 
-  #table[has-header] #header {
-    :host([overflow~='top']) &::before {
-      content: '';
-      inset-block-end: calc(var(--_row-border-width) * -1);
-    }
+  :host([overflow~='top']) [part~='last-header-row']::before {
+    inset-block-end: calc(var(--_row-border-width) * -1);
+    border-block-end-style: solid;
   }
 
-  #table[has-footer] #footer {
-    :host([overflow~='bottom']) &::before,
-    :host(:not([overflow~='top'])) &::before {
-      content: '';
-      inset-block-start: calc(var(--_row-border-width) * -1);
-    }
+  :host([overflow~='bottom']) [part~='first-footer-row']::before,
+  :host(:not([overflow~='top'])) #scroller:not([empty-state]) [part~='first-footer-row']::before {
+    inset-block-start: calc(var(--_row-border-width) * -1);
+    border-block-start-style: solid;
+    content: '';
   }
 
   [part~='body-row'] {

packages/grid/src/vaadin-grid-scroll-mixin.js

@@ -454,6 +454,16 @@ export const ScrollMixin = (superClass) =>
         // Update the horizontal scroll position property of the focused row
         this.__updateRowScrollPositionProperty(focusedRow);
       }
+
+      const lastHeaderRow = this.$.header.querySelector("[part~='last-header-row']");
+      if (lastHeaderRow) {
+        this.__updateRowScrollPositionProperty(lastHeaderRow);
+      }
+
+      const firstFooterRow = this.$.footer.querySelector("[part~='first-footer-row']");
+      if (firstFooterRow) {
+        this.__updateRowScrollPositionProperty(firstFooterRow);
+      }
     }
 
     /**