кнопки mat-menu расположены друг над другом внутри mat-таблицы

Question

Я работаю с ковриком. Моя работа - загружать данные и изменять их (удалять, добавлять, сортировать). Я подхожу к использованию mat-menu в заголовке и первом столбце, но все кнопки меню mat расположены друг над другом. Я думаю, что это как-то связано со стилем стола, но я не уверен.

Я пытался играть со стилем, но я не эксперт, когда дело доходит до sass.

вот мой HTML для таблицы

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- an extra columnm for row editing buttons : required adding a new header -> "actions" -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row; let rIndex = index;">
        <button mat-button [matMenuTriggerFor]="menu" yPosition="below">
          <mat-icon>arrow_drop_down_circle</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-icon-button matToolTip="Delete Row" matTooltipPosition="above" (click)="deleteRow(rIndex)">
            <mat-icon>delete</mat-icon>
            <span>Delete Header</span>
          </button>
          <button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
            (click)="addRowToTheLeft(rIndex)">
            <mat-icon>add_circle</mat-icon>
            <span>Add Left Header</span>
          </button>
          <button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
            (click)="addRowToTheRight(rIndex)">
            <mat-icon>add_circle</mat-icon>
            <span>Add Right Header</span>
          </button>
        </mat-menu>
        <button mat-icon-button matToolTip="Select Row" matTooltipPosition="above" (click)="selectRow(i)">
          <mat-icon>check_box_outline_blank</mat-icon>
        </button>
      </td>
    </ng-container>
  </table>

Вот изображение того, как это выглядит: https://imgur.com/nP6bX5v

Ожидаемый результат - кнопки должны быть ниже друг друга