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)

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;

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);
 

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;

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 {