Angular Material Table displays uneven width on the first colum - html

Question

I created a Material Table where I give the user the option to add or remove columns. The table can also sort, arrange columns, and has a sticky actions column. I want the table to take 100% of the available width space and scroll on the table when there are too many columns instead of fitting them to the screen size. The problem that I have is when only a few columns are displayed, for some reason the first column takes a lot more space then the other columns. I've tried many things and the only solution that I've found was making the table-layout: fixed but this will break the scrolling of overflow-x: scroll which is not what the users want. Any suggestions?
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<ng-container *ngIf="column !== 'Actions'; else action">
<th [ngClass]="{'border': hasTableBorders}" mat-header-cell cdkDrag [hidden]="column == 'Id'" *matHeaderCellDef mat-sort-header>{{ column }}</th>
<td [ngClass]="{'border': hasTableBorders}" mat-cell [hidden]="column == 'Id'" *matCellDef="let element">{{ element[column] | shorten:22 }}</td>
</ng-container>
<ng-template #action>
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell class="m-0 p-0" *matCellDef="let element">
<h3 class="btn bi bi-pencil-fill" matTooltip="Quick Edit" (click)="onQuickEdit(element.Id)" [matTooltipPosition]="'above'"></h3>
<h2 class="btn bi bi-eye-fill" matTooltip="View" (click)="onFullEdit(element.Id)" [matTooltipPosition]="'above'"></h2>
</td>
</ng-template>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr [ngClass]="{'alternate-row-colors': isAlternateRowColor}" mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</mat-table>
css
.mat-table {
overflow-x: scroll;
width: 100%;
}
.mat-cell, .mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 10px;
line-break: unset;
width: 100%;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
.mat-row,
.mat-header-row {
display: table-row;
}
Looks good with many columns
Bad display