ui: increase width and allow long dropdown items to wrap (#5194)

The 'tb-dropdown' widget now better handles items that are very
long. The dropdown menu width grows to fit content, up to a point,
and longer text will wrap.

Googlers, see b/193896469, and cl/388827477 for more.

Author: psybuzz

tensorboard/webapp/widgets/dropdown/dropdown_component.scss

@@ -27,3 +27,17 @@ mat-select:focus {
   outline-color: -webkit-focus-ring-color;
   outline-style: auto;
 }
+
+::ng-deep .mat-select-panel {
+  max-width: 70vw;
+}
+
+.tb-mat-option {
+  // Overrides Angular Material's fixed height.
+  height: auto;
+}
+
+::ng-deep .mat-option-text {
+  white-space: normal;
+  word-break: break-all;
+}

tensorboard/webapp/widgets/dropdown/dropdown_component.ts

@@ -35,6 +35,7 @@ export interface DropdownOption {
     >
       <mat-option
         *ngFor="let option of options"
+        class="tb-mat-option"
         [value]="option.value"
         [disabled]="option.disabled"
       >