MDCMigration: Style right pane dropdowns for MDC migration. (#6614)

This restyles the right-hand pane dropdowns. The end result is:
1. selection trigger looks mostly like current.
2. selection panel is styled similar to current but selection rendering
is different and the panel is offset lower and slightly to the right.

Here are some sample screenshots but please patch it in locally and give
it a try:


![image](https://github.com/tensorflow/tensorboard/assets/17152369/9a03dbd2-36c2-4f82-aa0a-760dffdbb6f3)


![image](https://github.com/tensorflow/tensorboard/assets/17152369/8a7acd25-f099-4bd9-b6c2-180914d70262)

Author: bmd3k

tensorboard/webapp/widgets/dropdown/dropdown_component.scss

@@ -20,6 +20,16 @@ mat-select {
   border-radius: 3px;
   box-sizing: border-box;
   padding: 6px;
+
+  // Default is 16px.
+  font-size: 12px;
+  // Default is 24px.
+  line-height: normal;
+
+  ::ng-deep .mat-mdc-select-arrow-wrapper {
+    // Default is 24px.
+    height: 12px;
+  }
 }
 
 mat-select:focus {
@@ -29,21 +39,15 @@ mat-select:focus {
   outline-style: auto;
 }
 
-::ng-deep .mat-select-panel {
+::ng-deep .mat-mdc-select-panel {
   max-width: 70vw;
 }
 
 // This selector needs relatively more specificity than Angular Material's
 // to override the fixed height.
-::ng-deep mat-option.mat-option {
-  height: auto;
-}
-
-::ng-deep .mat-option-text {
-  white-space: normal;
-  word-break: break-all;
-}
-
-.option-content {
-  white-space: nowrap;
+::ng-deep mat-option.mat-mdc-option {
+  // Default is 48px.
+  min-height: 32px;
+  // Default is 16px.
+  font-size: 12px;
 }

tensorboard/webapp/widgets/dropdown/dropdown_component.ts

@@ -35,6 +35,7 @@ export interface DropdownOption {
   template: `
     <mat-select
       [value]="value"
+      [hideSingleSelectionIndicator]="true"
       (selectionChange)="selectionChange.emit($event.value)"
     >
       <mat-option