Как установить высоту элемента списка выбора матов в angular?

Question

Мне нужно сделать меньшие строки, но я не знаю, как это сделать без уничтожения моего списка. Вот как выглядит мой список:

    [...]
        <mat-selection-list #fileElementsList [(ngModel)]="selectedFiles" class="explorer-list-selection">
            <div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="fileElements">
                <mat-list-option
                    cdkDrag 
                    *ngFor="let element of fileElements" 
                    class="pointer explorer-list-selection-element" 
                    (click)="countSelection($event,element)"
                    (dblclick)="navigate(element)" 
                    (contextmenu)="onContextMenu($event, element)"
                    [ngClass]="{'explorer-list-selection-element-selected': element.selected}"
                >
                    <mat-grid-list cols="16" rowHeight="30px">
                        <mat-grid-tile colspan="4">
                            <mat-icon *ngIf="element.isFolder" color="primary">
                                folder
                            </mat-icon>
                        <mat-icon *ngIf="!element.isFolder" color="primary">
                            insert_drive_file
                        </mat-icon>
                            {{element.name}}
                        </mat-grid-tile>
                    <mat-grid-tile colspan="2">
                        {{element.extension}}
                    </mat-grid-tile>
                    <mat-grid-tile>
                        <mat-icon *ngIf="element.status == 'online'" class="status-online">
                            check_circle
                        </mat-icon>
                        <mat-icon *ngIf="element.status == 'unknown'" class="status-unknown">
                            help
                        </mat-icon>
                        <mat-icon *ngIf="element.status == 'offline'" class="status-offline">
                            report_problem
                        </mat-icon>
                    </mat-grid-tile>
                    <mat-grid-tile>
                        {{element.size}}
                    </mat-grid-tile>
                    <mat-grid-tile colspan="2">
                        {{element.serverVersion}}
                    </mat-grid-tile>
                    <mat-grid-tile colspan="4">
                        {{element.lastModified}}
                    </mat-grid-tile>
                    <mat-grid-tile colspan="2">
                        {{element.segmentName}}
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-list-option>
        </div>
    </mat-selection-list>
    [...]

И CSS file:

[...]
.explorer {
  padding-top: 7px;
  padding-left: 16px;

  &-list {

    &-position {
      margin-left: -16px; //TODO fix
      margin-top: -7px; //TODO fix
      margin-right: -16px; //TODO fix
    }

    &-row {

      &-title {
        border-bottom: 1px solid grey;

        &-text {
          padding-bottom: 2px;
        }
      }
    }

    &-selection {
      margin-top: -8px;

      &-element {
        height: 1410px;
        border-bottom: 1px solid lightgrey;

        &-selected{
          float: left;
          margin: 5px;
        }
      }
    }
  }
}
[...]

Я пытался сделать это по rowHeight, но это влияет только на список сетки матов, а не список матов вариант. Если я попытался сделать это напрямую, найдя имя элемента в chrome отладчике, это начало мешать моему представлению, и приложение перестало работать.