Mat Table with reordering Columns (cdkDrag) not working with sticky header row

I made a mat table with column reordering and it works partially correct.

The only issue I got is that when I have a sticky header row and the table body is scrolled and then I want to reorder the columns, the boundary is not the mat header row and instead a random row that was behind it, when i started dragging.

I also tried to change cdkDragBoundary but this probably needs to stay on "mat-table" otherwise I cant drag the columns to the edges when the table has an overflow in x axis

Angular version is 17.4

<div class="table-wrapper-container">
<div class="mat-elevation-z8 table-wrapper">
<mat-table
[dataSource]="dataSource"
class="table small-density resizeable"
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="tableDrop($event)"
matSort
#table
>
<ng-container matColumnDef="position">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
appResize
host="flex-table"
cdkDrag
cdkDragBoundary="mat-table"
cdkDragPreviewClass="drag-preview"
cdkDragPreviewContainer="parent"
cdkDragLockAxis="x"
cdkdrag
>
No.
</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.position }} </mat-cell>
</ng-container>

<ng-container matColumnDef="name">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
appResize
host="flex-table"
cdkDrag
cdkDragBoundary="mat-table"
cdkDragPreviewClass="drag-preview"
cdkDragPreviewContainer="parent"
cdkDragLockAxis="x"
>
Name
</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field>
<input matInput [(ngModel)]="element.name" />
</mat-form-field>
</mat-cell>
</ng-container>

<mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
#row
></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

<mat-paginator
[length]="100"
[pageSize]="25"
[pageSizeOptions]="[5, 10, 25]"
>
</mat-paginator>
</div>
</div>

Continue reading...