So I'm working with this mat-card:
<mat-card>
<mat-card-content>
<div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};">
<site-details [site]='siteSource'></site-details>
</div>
</mat-card-content>
</mat-card>
And within each element, I have some corresponding HTML:
<div *ngIf="site" class="col-xs site-details">
<div>
<tr>
<td class="col-sm-6"><label>http://www.{{site._source.url}}.com.br</label></td>
<td class="col-sm-2">
<a routerLink="editSite/{{site._id}}" style="text-decoration: none; color: white"
routerLinkActive="active">
<button mat-raised-button color="primary">
Edit
</button>
</a>
</td>
<td class="col-sm-2"><button mat-raised-button color="warn"
(click)="openConfirmationDialog('delete',site._source.url)">Delete
</button></td>
<td class="col-sm-2"> <a target="_blank" href="http://www.{{site._source.url}}.com.br" title="Visit site"><button
mat-raised-button>Visit Site</button></a>
</td>
</tr>
</div>
<hr>
</div>
<router-outlet></router-outlet>
The issue arises when switching to mobile view as the buttons extend beyond the boundaries of the mat-card:
Is there a way to ensure that the content remains responsive and contained within the mat-card when viewed on mobile?