Help needed to ensure button responsiveness within a table. Here's how it appears on desktop and mobile screens:
Desktop View
https://i.sstatic.net/GxHUe.png
Mobile View
https://i.sstatic.net/oOAgk.png
The delete button is somewhat obscured in the mobile view.
This is the corresponding HTML code:
<div class="col-md-8">
<div class="col-md-12">
<div class="design-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div class="design-container mat-elevation-z8" *ngIf="billTypeList">
<mat-table [dataSource]="dataSource" matSort style="width: 100%">
<ng-container matColumnDef="BillName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.BillName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ConsumptionAbbr">
<mat-header-cell *matHeaderCellDef mat-sort-header> Abbreviation </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.ConsumptionAbbr}} </mat-cell>
</ng-container>
<ng-container matColumnDef="DateAdded">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date Added </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.PostingDateTime | date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Action">
<mat-header-cell *matHeaderCellDef mat-sort-header> Delete </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]="row.color">
<button mat-raised-button class="btn btn-danger" (click)="deleteBillType(row.BillTypeID)">Delete</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
</div>
Seeking guidance for the correct way to address this.
**UPDATE**
The solution provided earlier did not yield the desired outcome.
<div class="table-reponsive">
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="MonthNo">
<mat-header-cell *matHeaderCellDef mat-sort-header> Month </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.MonthNo}} </mat-cell>
</ng-container>
<ng-container matColumnDef="RatePerSqm">
<mat-header-cell *matHeaderCellDef mat-sort-header> Rate Per Sq. M. </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.RatePerSqm}} </mat-cell>
</ng-container>
<ng-container matColumnDef="FixedAmount">
<mat-header-cell *matHeaderCellDef mat-sort-header> Fixed Amount </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.FixedAmount | currency: 'PHP '}} </mat-cell>
</ng-container>
<ng-container matColumnDef="EffectiveDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Effective Date </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.EffectiveDateTime | date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Action">
<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]="row.color">
<button class="btn btn-primary" (click)="deleteRealPropertyTaxRate(row.RealPropertyTaxRateID)">Delete Record</button>
<button class="btn btn-primary" (click)="onEdit(row)">Edit Record</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
</div>
Using the "table-responsive" class proved ineffective as well.