MDC Migration: Fix styling for runs table context menu (tensorflow#6607)

## Motivation for features / changes
After migrating to the new Material Components many of the styles were
broken. This cleans up the buttons in the runs table context menu.

## Screenshots of UI changes (or N/A)
<img width="196" alt="Screenshot 2023-09-28 at 2 59 22 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/01ef7e8e-7ea0-4de6-ae75-c9fc232e0549">
<img width="196" alt="Screenshot 2023-09-28 at 2 59 12 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/21842916-7805-4aa2-baec-8357ac5ec77f">

Author: JamesHollyer

tensorboard/webapp/widgets/data_table/data_table_component.ng.html

@@ -26,22 +26,24 @@
       <mat-icon svgIcon="close_24px"></mat-icon>Remove
     </button>
     <button
-      *ngIf="contextMenuHeader?.sortable"
+      *ngIf="contextMenuHeader?.sortable &&
+      sortingInfo.order === SortingOrder.ASCENDING &&
+      sortingInfo.name === contextMenuHeader?.name"
       class="context-menu-button sort-button"
       mat-button
       (click)="sortByHeader(contextMenuHeader?.name)"
     >
-      <ng-container
-        *ngIf="
-          sortingInfo.order === SortingOrder.ASCENDING &&
-          sortingInfo.name === contextMenuHeader?.name;
-          else descending"
-      >
-        <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
-      </ng-container>
-      <ng-template #descending>
-        <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
-      </ng-template>
+      <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
+    </button>
+    <button
+      *ngIf="contextMenuHeader?.sortable &&
+      (sortingInfo.order !== SortingOrder.ASCENDING ||
+      sortingInfo.name !== contextMenuHeader?.name)"
+      class="context-menu-button sort-button"
+      mat-button
+      (click)="sortByHeader(contextMenuHeader?.name)"
+    >
+      <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
     </button>
     <button
       *ngIf="contextMenuHeader?.filterable"

tensorboard/webapp/widgets/data_table/data_table_component.scss

@@ -66,8 +66,9 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   }
 
   .context-menu-button {
-    text-align: left;
+    justify-content: left;
     width: 100%;
+    text-wrap: nowrap;
   }
 
   .no-actions-message {