мат-панель инструментов-рядные укладки друг на друга

Question

У меня есть эта проблема с <mat-toolbar-row>.Я попытался использовать flexbox и grid на <mat-toolbar> с main-content class.Но они продолжают складываться немного.

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    // SOME CODE
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="main-toolbar" color="primary">
      <mat-icon><img src="../../assets/images/x1/outline_navigate_before_black_24dp.png" alt=""></mat-icon>
      <span>R</span>
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon><img src="../../assets/images/x1/round_menu_black_24dp.png" alt=""></mat-icon>
      </button>
    </mat-toolbar>

    <!-- /////////////////////////// -->
    <!--  Home grid -->
    <!-- /////////////////////////// -->
      <mat-toolbar class="main-content">
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>

      </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

Это scss этих элементов

.main-content {
padding-top: 64px;
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;

mat-card {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 0;
}

Если вы посмотрите внимательно, он перекрывает некоторые пиксели, только нижняя <mat-toolbar-row> имеетполная высота. мобильный вид вид на рабочий стол

С уважением.