ui: increase width and allow long dropdown items to wrap (tensorflow#…

…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.
yatbear · Mar 27, 2023 · 2d31702 · 2d31702
1 parent 23c7248
commit 2d31702
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/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;
+}
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts b/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"
       >