From ab906b225dbdb58b4760783edfb910296d33c8dc Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Mon, 2 Oct 2023 17:53:09 -0400
Subject: [PATCH] MDCMigration: Style run table and right pane checkboxes for
 MDC migration.

---
 .../right_pane/settings_view_component.scss   | 25 ++++++++++++++-----
 .../views/runs_table/runs_data_table.scss     |  4 ---
 .../data_table/header_cell_component.scss     |  2 +-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
index 85fb658009..30b069e6df 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -34,7 +34,10 @@ section {
   margin: 0 0 12px 0;
 }
 
-section .control-row:not(:last-child) {
+// Add additional margin between most control elements. The exception is when
+// the second control row is a checkbox, in which case we just rely on the
+// padding that is already included in the checkbox.
+section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
   margin-bottom: 12px;
 }
 
@@ -89,6 +92,20 @@ section .control-row:not(:last-child) {
   }
 }
 
+mat-checkbox {
+  // Counteract the padding of the checkbox in order to align it vertically
+  // with other items in the pane.
+  margin-left: -11px;
+
+  ::ng-deep label {
+    @include tb-theme-foreground-prop(color, secondary-text);
+    font-size: 12px;
+    letter-spacing: normal;
+    padding-left: 0px;
+    white-space: nowrap;
+  }
+}
+
 mat-slider {
   flex: 1;
   // Reset mat-slider's internal extra space on left/right sides
@@ -125,12 +142,8 @@ tb-dropdown {
   display: block;
 }
 
-.linked-time {
-  padding: 5px 0;
-}
-
 .control-row {
   .indent {
-    margin-left: 25px;
+    margin-left: 28px;
   }
 }
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 757229b8ec..9fad68e486 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -56,10 +56,6 @@ tb-data-table-header-cell {
   vertical-align: middle;
   @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
 
-  &:first-child {
-    padding-left: 16px;
-  }
-
   &:last-child {
     @include tb-theme-foreground-prop(border-right, border, 1px solid);
   }
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 704f98ccda..71f09d1761 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -21,7 +21,7 @@ $_icon_size: 12px;
 
 :host {
   display: table-cell;
-  padding: 2px;
+  padding: 4px;
   vertical-align: bottom;
 
   &:hover {