fix: Do not allow border to grow row height (#12449)

2 files changed, 9 insertions, 6 deletions

diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
index 8443438fe2..8d3db80baa 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
@@ -2,13 +2,14 @@
  *
  * @group table
  */
-$v-table-row-height: $v-unit-size !default;
+$v-table-border-width: first-number($v-border) !default;
 
 /**
  *
  * @group table
  */
-$v-table-border-width: first-number($v-border) !default;
+$v-table-row-height: $v-unit-size !default;
+$v-table-body-row-height: round($v-table-row-height + $v-table-border-width) !default;
 
 /**
  *
@@ -229,7 +230,7 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-cell-content {
     border-left: $v-table-border-width solid $border-color;
     overflow: hidden;
-    height: $v-table-row-height;
+    height: $v-table-body-row-height;
     vertical-align: middle;
 
     &:first-child {
@@ -279,9 +280,11 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-table td {
     border-top: $v-table-border-width solid $border-color;
+    box-sizing: border-box;
   }
 
   .#{$primary-stylename}-table tr:first-child > td {
+    height: $v-table-row-height;
     border-top: none;
   }
 
@@ -522,7 +525,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content {
     border-bottom: 2px solid $v-focus-color;
-    height: $v-table-row-height - 2px;
+    height: $v-table-body-row-height - 2px;
   }
 
   .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper {
@@ -531,7 +534,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content {
     border-top: 2px solid $v-focus-color;
-    height: $v-table-row-height - 2px + $v-table-border-width;
+    height: $v-table-body-row-height - 2px + $v-table-border-width;
   }
 
   .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper {
@@ -679,7 +682,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
   .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
-    height: $v-table-row-height - 1px;
+    height: $v-table-body-row-height - 1px;
   }
 }
 
diff --git a/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png b/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png
index 2612b14342..c18b85f162 100755
--- a/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png
+++ b/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png