Angular Material Table drag and drop not working correctly with wide rows

Question

I have a little problem with my mat-table. Here it is the essential part of the HTML.

<table mat-table [dataSource]="dataSource" class="table table-lg" *ngIf='slideGroups.length > 0' cdkDropList
    (cdkDropListDropped)="onListDrop($event)" [cdkDropListDisabled]="dragDisabled">
    <ng-container matColumnDef="icon">
        <th mat-header-cell *matHeaderCellDef> Típus </th>
        <td mat-cell *matCellDef="let element">
            <mat-icon class="matIconClass" matListIcon style="width: 50px; cursor: move;"
                (mousedown)="dragDisabled = false;">
                reorder
            </mat-icon>
            <mat-icon matListIcon *ngIf="element.icon==='faMusic'" style="width: 50px;">
                <fa-icon [icon]="faMusic"></fa-icon>
            </mat-icon>
            <mat-icon matListIcon *ngIf="element.icon==='faBookBible'" style="width: 50px;">
                <fa-icon [icon]="faBookBible"></fa-icon>
            </mat-icon>
        </td>
    </ng-container>

    // Other ng-containers (not relevant)

    // This next ng-container is causing the wide row:
    <ng-container matColumnDef="template">
        <th mat-header-cell *matHeaderCellDef> Sablon
        </th>
        <td mat-cell *matCellDef="let element">
            <mat-form-field style="margin-bottom: -1.25em; margin-top: -1.25em">
                <mat-select [(value)]="element.template" class="templateSelect">
                    <mat-select-trigger class="templateTrigger">
                        <div style="position: relative; height:100%; width: 100%">
                            <svg *ngIf='!element.template.imageToShow' [ngStyle]="{width: '100%', height: '100%'}">
                                <rect
                                    style="fill:{{element.template.bgcolor}};stroke-width:3;stroke:rgb(0,0,0); width: 100%; height: 100%" />
                            </svg>
                        </div>
                    </mat-select-trigger>
                    <mat-option *ngFor="let template of templates; let i=index" [value]="template"
                        class="templateOption">
                        <div style="position: relative; height:100%; width: 100%">
                            <svg *ngIf='!template.imageToShow' [ngStyle]="{width: '100%', height: '100%'}">
                                <rect
                                    style="fill:{{template.bgcolor}};stroke-width:3;stroke:rgb(0,0,0); width: 100%; height: 100%" />
                            </svg>
                        </div>
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
    </ng-container>

    // Other ng-containers (not relevant)

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row cdkDrag *matRowDef="let row; columns: displayedColumns;" [cdkDragData]=row></tr>
</table>

The problem is that when the table has a fairly big amount of rows (lets say around 10), then if I try to drag a row from the end of the table, the gap automatically jumps to the middle of the table, and the table misjudges whether I pulled the row over another row. With other words I need to pull a row much further down than the width of a row in order to move the gap down. As I am aware that this is unlikely to be understandable as I described it, I made a video of the problem:

link.

I am pretty sure that there is something to do with the width of a row, because I managed to reorder other tables perfectly, but this one is fairly wide, as you can see in the video.

Thanks in advance for every idea. :)