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.
tensorflow · Aug 4, 2021 · f722424 · f722424
1 parent 91f7e34
commit f722424
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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},
     });
   }