From f7224243469fb28fa724b2a99d4045d5bbe96947 Mon Sep 17 00:00:00 2001
From: Stephan Lee <stephanwlee@gmail.com>
Date: Tue, 3 Aug 2021 23:36:33 -0700
Subject: [PATCH] color group: improve visuals of the component (#5185)

This change improves visual aspect of the color group. Specifically, it
improves the dialog under very narrow screen.
---
 .../runs/views/runs_table/regex_edit_dialog.ng.html    |  2 +-
 .../views/runs_table/regex_edit_dialog_component.scss  |  4 ++++
 .../views/runs_table/regex_edit_dialog_container.ts    | 10 ++++++++++
 .../runs_table/runs_group_menu_button_component.ts     |  2 --
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
index 5f7e50b68ff..bb7a81732a6 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
@@ -58,7 +58,7 @@ <h4>Color group preview</h4>
             class="color-swatch"
             [ngStyle]="{backgroundColor: colorRunsPair.color}"
           ></span
-          ><code name="group-id" [title]="colorRunsPair.groupId"
+          ><code class="group-id" [title]="colorRunsPair.groupId"
             >{{colorRunsPair.groupId}}</code
           ></label
         >
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
index 37107e8ebb9..cda76bfb848 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
@@ -62,6 +62,10 @@ ul {
   padding: 0;
 }
 
+mat-form-field {
+  width: 100%;
+}
+
 .group {
   @include tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 3px;
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
index 9c7b4c38f2a..f808da47fca 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
@@ -46,6 +46,16 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
     (onSave)="onSave($event)"
     (regexInputOnChange)="onRegexInputOnChange($event)"
   ></regex-edit-dialog-component>`,
+  styles: [
+    `
+      :host,
+      regex-edit-dialog-component {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ],
 })
 export class RegexEditDialogContainer {
   private readonly experimentIds: string[];
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
index b17f1d9632b..f0efee68dba 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
@@ -47,9 +47,7 @@ export class RunsGroupMenuButtonComponent {
     // data pass in the experiment id
     const dialogRef = this.dialog.open(RegexEditDialogContainer, {
       maxHeight: '95vh',
-      minHeight: '500px',
       maxWidth: '80vw',
-      minWidth: '600px',
       data: {experimentIds: this.experimentIds},
     });
   }