Expand & collapse angular material table with a button

Question

I'm having a problem with angular material table, I want each row to be expanded with a button (details button as shown in picture), but it getting expanded at the end of the table (as shown in picture), I want it to be expanded inside the row and not at the end of the table.

I'm using ng-container that calls *ngTemplateOutlet template to get rendered. this is my code:

<table
                                                    class="w-full bg-transparent"
                                                    mat-table
                                                    matSort
                                                    [dataSource]= "dataSource"
                                                    [trackBy]="trackByFn">

                                                    <!-- Transaction ID -->
                                                    <ng-container matColumnDef="ligneReleveId">
                                                        <th
                                                            mat-header-cell
                                                            mat-sort-header
                                                            *matHeaderCellDef>
                                                            ID
                                                        </th>
                                                        <td
                                                            mat-cell
                                                            *matCellDef="let ligneReleve">
                                <span class="pr-6 font-medium text-sm text-secondary whitespace-nowrap">
                                    {{ligneReleve.ligneReleveId}}
                                </span>
                                                        </td>
                                                    </ng-container>

                                                    <!-- Date -->
                                                    <ng-container matColumnDef="creditDebit">
                                                        <th
                                                            mat-header-cell
                                                            mat-sort-header
                                                            *matHeaderCellDef>
                                                            Credit debit
                                                        </th>
                                                        <td
                                                            mat-cell
                                                            *matCellDef="let ligneReleve">
                                <span class="pr-6 whitespace-nowrap">
                                    {{ligneReleve.creditDebit}}
                                </span>
                                                        </td>
                                                    </ng-container>
                                                    <ng-container matColumnDef="details">
                                                        <th mat-header-cell  *matHeaderCellDef > Details </th>
                                                        <td mat-cell *matCellDef="let ligneReleve" >
                                                            <button
                                                                class="min-w-10 min-h-7 h-7 px-2 leading-6"
                                                                mat-stroked-button
                                                                (click)="toggleDetails(ligneReleve.ligneReleveId)"
                                                            >
                                                                <mat-icon
                                                                    class="icon-size-5"
                                                                    [svgIcon]="selectedLigneReleve?.ligneReleveId === ligneReleve.ligneReleveId ? 'heroicons_solid:chevron-up' : 'heroicons_solid:chevron-down'"></mat-icon>
                                                            </button>

                                                        </td>
                                                    </ng-container>
                                                    <tr
                                                        mat-header-row
                                                        *matHeaderRowDef="displayedColumns">
                                                    </tr>
                                                    <tr
                                                        class="order-row h-16"
                                                        mat-row
                                                        *matRowDef="let row; columns: displayedColumns;">
                                                    </tr>

                                                </table>
                                                <div class="grid" *ngFor="let ligneReleve of ligneReleves">
                                                    <ng-container *ngIf="selectedLigneReleve?.ligneReleveId === ligneReleve.ligneReleveId">
                                                        <ng-container *ngTemplateOutlet="rowDetailsTemplate; context: {$implicit: ligneReleve}"></ng-container>
                                                    </ng-container>
                                                </div>
                                                <mat-paginator [pageSizeOptions]="[5, 10, 20]"
                                                               showFirstLastButtons>
                                                </mat-paginator>




<ng-template
            #rowDetailsTemplate
            let-ligneReleve>
            <div class="shadow-lg overflow-hidden">
                <div class="flex border-b">
                    <!-- Selected product form -->
                    <form
                        class="flex flex-col w-full"
                        [formGroup]="selectedLigneReleveForm">

                        <div class="flex flex-col sm:flex-row p-8">

                            <div class="flex flex-auto flex-wrap">

                                <!-- Cost, Base price, Tax & Price -->
                                <div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
                                    <mat-form-field class="w-full">
                                        <mat-label>Credit Debit</mat-label>
                                        <input
                                            matInput
                                            [formControlName]="'creditDebit'">
                                        {{ligneReleve.creditDebit}}
                                    </mat-form-field>

                                </div>
                                <div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
                                    <mat-form-field class="w-full">
                                        <mat-label>Ligne Releve Id</mat-label>
                                        <input
                                            matInput
                                            [formControlName]="'ligneReleveId'">
                                        {{ligneReleve.ligneReleveId}}
                                    </mat-form-field>


                                </div>

                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </ng-template>