diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 0293c23d3e..69042a8b06 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -20,6 +20,16 @@ mat-select {
   border-radius: 3px;
   box-sizing: border-box;
   padding: 6px;
+
+  // Default is 16px.
+  font-size: 12px;
+  // Default is 24px.
+  line-height: normal;
+
+  ::ng-deep .mat-mdc-select-arrow-wrapper {
+    // Default is 24px.
+    height: 12px;
+  }
 }
 
 mat-select:focus {
@@ -29,21 +39,15 @@ mat-select:focus {
   outline-style: auto;
 }
 
-::ng-deep .mat-select-panel {
+::ng-deep .mat-mdc-select-panel {
   max-width: 70vw;
 }
 
 // This selector needs relatively more specificity than Angular Material's
 // to override the fixed height.
-::ng-deep mat-option.mat-option {
-  height: auto;
-}
-
-::ng-deep .mat-option-text {
-  white-space: normal;
-  word-break: break-all;
-}
-
-.option-content {
-  white-space: nowrap;
+::ng-deep mat-option.mat-mdc-option {
+  // Default is 48px.
+  min-height: 32px;
+  // Default is 16px.
+  font-size: 12px;
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
index c89bea334c..026a8671c1 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
@@ -35,6 +35,7 @@ export interface DropdownOption {
   template: `
     <mat-select
       [value]="value"
+      [hideSingleSelectionIndicator]="true"
       (selectionChange)="selectionChange.emit($event.value)"
     >
       <mat-option