From 21e09a8bfb18b3513314cf98da5c9c1ec51eea8b Mon Sep 17 00:00:00 2001
From: E <psybuzz@users.noreply.github.com>
Date: Thu, 5 Aug 2021 16:06:02 -0700
Subject: [PATCH] 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.
---
 .../widgets/dropdown/dropdown_component.scss       | 14 ++++++++++++++
 .../webapp/widgets/dropdown/dropdown_component.ts  |  1 +
 2 files changed, 15 insertions(+)

diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index db1bdba02ef..516fad2bfce 100644
--- 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
index 64a71eb2c22..2bb72385232 100644
--- 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"
       >