MDCMigration: Style runs data table column selector for MDC migration. (#6617)

Restyle the runs data table column selector.

The contents end up being larger than current master version.
The search icon, and search text input are bigger.
The height of each item in the list is taller to match the larger button
touch target.

Some sample screenshots:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/fb8e2f5e-3170-4222-b356-58c333cdcb57)

![image](https://github.com/tensorflow/tensorboard/assets/17152369/47b8aecb-3c1f-4615-a968-7564b2f93bd7)

Author: bmd3k

tensorboard/webapp/widgets/data_table/column_selector_component.ng.html

@@ -14,11 +14,11 @@
 <div class="contents">
   <mat-form-field class="search-area">
     <mat-icon matPrefix class="search-icon" svgIcon="search_24px"></mat-icon>
+    <mat-label>Search</mat-label>
     <input
       matInput
       #search
       [(ngModel)]="searchInput"
-      placeholder="Search"
       (ngModelChange)="searchInputChanged()"
     />
   </mat-form-field>

tensorboard/webapp/widgets/data_table/column_selector_component.scss

@@ -38,14 +38,6 @@ limitations under the License.
 
   .search-area {
     margin-bottom: 4px;
-
-    mat-icon.search-icon {
-      font-size: 1em;
-
-      ::ng-deep svg {
-        padding-top: 6px;
-      }
-    }
   }
 
   .column-list {
@@ -58,7 +50,11 @@ limitations under the License.
   }
 
   .column-button {
-    text-align: left;
+    // Don't allow buttons to shrink when there are many of them.
+    flex-shrink: 0;
+    // Match height of button touch target to avoid unnecessary scrollbar.
+    height: 48px;
+    justify-content: left;
     width: 100%;
 
     &.selected {