Элементы списка материалов Angular с кнопками, красиво, пожалуйста

Мне нужен список Angular Material v18.1 с выделенным содержимым и парой кнопок, что-то вроде этого:

Но когда я добавляю, скажем, директиву matListItemTitle к имени, всё идёт наперекосяк:

Конечно, я могу явно стилизовать элементы, но я подумал, что директивы Angular Material List будут немного более полезными. Любая информация о том, что я делаю неправильно?

<main>
  <mat-list>
    @for (c of contacts; track c) {
    <mat-list-item>
      <mat-icon matListItemIcon>folder</mat-icon>
      <div class = "contact-details">
        <!-- without matListItemTitle display is okay -->
        <div matListItemTitle>{{c.name}}</div>
        <div>{{c.email}}</div>
        <div>{{c.description}}</div>
      </div>
      <button matListItemMeta mat-stroked-button color = "primary">Compose</button>
      <button matListItemMeta mat-stroked-button color = "warn">Remove</button>
    </mat-list-item>
    <mat-divider></mat-divider>
    }
  </mat-list>
</main>

:host {
  width: 100%;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 20px;
}

mat-list {
  width: 80%;
}

mat-list-item {
  display: flex;
  flex-direction: row;
}

.contact-details {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px 30px;
}

import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule, MatDividerModule, MatIconModule, MatListModule],
  templateUrl: './list.html',
  styleUrl: './list.css',
})
export class App {
  contacts = [
    { name: 'one', email: '1@one', description: 'The one.' },
    { name: 'two', email: '2@one', description: 'The two.' },
  ];
}