From 33dcfc0f40fcf0a34ff3fecdb7eb0fed7d942ddf Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Wed, 4 Oct 2023 11:23:29 -0400
Subject: [PATCH] MDCMigration: Style runs data table row heights for MDC
 migration. (#6616)

Restyle the height of header and rows in the runs data table.

The height of these rows does need to increase compared to current
master in order to account for the increase in height of the checkbox
touch target. But they don't need to be as tall as they are now compared
to current MDCMigration.

The end result is:
* Header and rows height are now 48px. (compared to 56px and 49px in
MDCMigration and compared to 48px and 44px in master). So the non-header
rows grow in height by 4px compared to master. Header rows remain the
same compared to master.

Implementation Detail:
* I move the common `padding: 4px` out of content_cell_component and
header_cell_component and now make this padding the responsibility of
runs_data_data and scalar_card_data_table to specify.
* scalar_card_data_table specifies, for the time being, `padding: 4px`
until we determine we need to make adjustments to it as well for MDC
migration.
* runs_data_table specifies different padding and adjust its height.

Some sample screenshots:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/5b748e16-3c0d-40ad-a4df-8a400ec4e0e8)
---
 .../metrics/views/card_renderer/scalar_card_data_table.scss  | 5 +++++
 .../webapp/runs/views/runs_table/runs_data_table.scss        | 4 +++-
 .../webapp/widgets/data_table/content_cell_component.scss    | 2 +-
 .../webapp/widgets/data_table/header_cell_component.scss     | 1 -
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
index 632accf973..0a75646c45 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
@@ -14,6 +14,11 @@ limitations under the License.
 ==============================================================================*/
 $_circle-size: 12px;
 
+tb-data-table-content-cell,
+tb-data-table-header-cell {
+  padding: 4px;
+}
+
 .row-circle {
   height: $_circle-size;
   width: $_circle-size;
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
index 9fad68e486..6fe5224970 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -48,11 +48,13 @@ $_arrow_size: 16px;
 
 tb-data-table-content-row,
 tb-data-table-header-cell {
-  height: 44px;
+  // Match the size of the touch targets for the checkbox.
+  height: 48px;
 }
 
 tb-data-table-content-cell,
 tb-data-table-header-cell {
+  padding: 0 4px;
   vertical-align: middle;
   @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
 
diff --git a/tensorboard/webapp/widgets/data_table/content_cell_component.scss b/tensorboard/webapp/widgets/data_table/content_cell_component.scss
index 54a9dcfd8e..dbdcf5ee6c 100644
--- a/tensorboard/webapp/widgets/data_table/content_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/content_cell_component.scss
@@ -15,8 +15,8 @@ limitations under the License.
 
 :host {
   display: table-cell;
-  padding: 4px;
 }
+
 .cell {
   align-items: center;
   display: flex;
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index c3edefe4e4..08b8635e03 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -22,7 +22,6 @@ $_icon_padding: 4px;
 
 :host {
   display: table-cell;
-  padding: 4px;
   vertical-align: bottom;
 
   &:hover {