ui: fix wrapping of dropdown items (#5242)

psybuzz · web-flow · commit d4b37e386554 · 2021-08-17T19:23:52.000-07:00
Long items within tb-dropdown are supposed to wrap onto multiple
lines. Our CSS was incorrectly using a selector without enough
specificity, and Angular was overriding our classname.
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -32,8 +32,9 @@ mat-select:focus {
   max-width: 70vw;
 }
 
-.tb-mat-option {
-  // Overrides Angular Material's fixed height.
+// This selector needs relatively more specificity than Angular Material's
+// to override the fixed height.
+::ng-deep mat-option.mat-option {
   height: auto;
 }
 
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
@@ -35,7 +35,6 @@ export interface DropdownOption {
     >
       <mat-option
         *ngFor="let option of options"
-        class="tb-mat-option"
         [value]="option.value"
         [disabled]="option.disabled"
       >

Original file line number	Diff line number	Diff line change
`@@ -32,8 +32,9 @@ mat-select:focus {`
`32`	`32`	`max-width: 70vw;`
`33`	`33`	`}`
`34`	`34`
`35`		`-.tb-mat-option {`
`36`		`- // Overrides Angular Material's fixed height.`
	`35`	`+// This selector needs relatively more specificity than Angular Material's`
	`36`	`+// to override the fixed height.`
	`37`	`+::ng-deep mat-option.mat-option {`
`37`	`38`	`height: auto;`
`38`	`39`	`}`
`39`	`40`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,6 @@ export interface DropdownOption {`
`35`	`35`	`>`
`36`	`36`	`<mat-option`
`37`	`37`	`*ngFor="let option of options"`
`38`		`- class="tb-mat-option"`
`39`	`38`	`[value]="option.value"`
`40`	`39`	`[disabled]="option.disabled"`
`41`	`40`	`>`