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

Authored-by: Tatu Lund <tatu@vaadin.com>

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 8443438fe29eedafe548c225d3b79cb8fbdfc92f..8d3db80baa90592ace4dff33d095a82a72e86894 100644 (file)
--- 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 2612b1434292ea1f5ac9bef39dc1d851b1af6a9b..c18b85f1620ec899e00db604ab1aa76bb5c56d54 100755 (executable)
Binary files a/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png and b/uitest/reference-screenshots/chrome/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png differ