diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
index 667eaa8deb..fc0f611463 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
@@ -51,21 +51,19 @@
   let-headers="headers"
   let-dataTableMode="dataTableMode"
 >
-  <div class="header-list">
-    <div
-      class="header-list-item"
-      *ngFor="let header of headers;"
-      draggable="true"
-      (dragstart)="dragStart(header)"
-      (dragend)="dragEnd(dataTableMode)"
-      (dragenter)="dragEnter(header, dataTableMode)"
-      [ngClass]="getHighlightClasses(header)"
-    >
-      <mat-checkbox
-        [checked]="header.enabled"
-        (change)="toggleHeader(header, dataTableMode)"
-        ><tb-data-table-header [header]="header"></tb-data-table-header
-      ></mat-checkbox>
-    </div>
+  <div
+    class="header-list-item"
+    *ngFor="let header of headers;"
+    draggable="true"
+    (dragstart)="dragStart(header)"
+    (dragend)="dragEnd(dataTableMode)"
+    (dragenter)="dragEnter(header, dataTableMode)"
+    [ngClass]="getHighlightClasses(header)"
+  >
+    <mat-checkbox
+      [checked]="header.enabled"
+      (change)="toggleHeader(header, dataTableMode)"
+      ><tb-data-table-header [header]="header"></tb-data-table-header
+    ></mat-checkbox>
   </div>
 </ng-template>
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
index b0fb76e1c6..2a3f3c0464 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
@@ -32,13 +32,10 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   z-index: 0;
   height: 100%;
 }
-.header-list {
-  margin-top: 5%;
-  margin-left: 5%;
-}
 
 .header-list-item {
   padding: 3px;
+  height: 24px;
 }
 
 .highlighted {
@@ -85,6 +82,6 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 // allowed for the tab content. Then the child element can correctly decide when
 // a scroll bar is needed. This class is added to a div internal to the
 // mat-tab-group.
-::ng-deep .mat-tab-body-wrapper {
+::ng-deep .mat-mdc-tab-body-wrapper {
   flex: 1;
 }
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 30b069e6df..8ca9a87c7a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -133,7 +133,6 @@ mat-slider {
     }
   }
   mat-icon {
-    width: 15px;
     margin-right: 6px;
   }
 }