MDCMigration: fix Column Editor Style (#6623)

## Motivation for features / changes
After an update to the new MDC Components the style of this feature was
messed up. This fixes that style.

## Screenshots of UI changes (or N/A)
<img width="458" alt="Screenshot 2023-10-05 at 3 03 57 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/6ddc2e53-f129-4fc2-b06e-7a7e1debdb59">
<img width="456" alt="Screenshot 2023-10-05 at 3 04 04 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/961bca54-d8b3-4f5c-961e-014ba0d1bdcd">
<img width="476" alt="Screenshot 2023-10-05 at 3 04 17 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/8c66d5ec-16aa-42fd-92b8-fdea3623c8bf">

Author: JamesHollyer

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>

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

tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss

@@ -133,7 +133,6 @@ mat-slider {
     }
   }
   mat-icon {
-    width: 15px;
     margin-right: 6px;
   }
 }