I am facing an issue with my code. In one of the td elements, I have the user's name image on the left and their first name on the right. The problem arises when the first name is too long, causing the image to disappear. Everything works fine if the first name is no more than 10 characters in length.
Can anyone suggest a CSS solution to this problem?
<div *ngIf="predictions.length" class="matches-tabs__content tab-content">
<div class="match-lineups-container tab-pane fade show active" id="tab-1" role="tabpanel">
<div class="table-responsive">
<table class="matches-table lineups-table lineups-table--style-3 table table-striped table-dark">
<tbody>
<tr>
<th></th>
</tr>
<tr *ngFor="let prediction of predictions; index as i;">
<td>
<a [routerLink]="['/user', prediction.created_by_user_id]">
<figure class="match-player team-1 figure" role="group">
<figure class="match-player__avatar">
<img src="assets/img/s\amples/match-player-01-60x60.png" alt="">
</figure>
<figcaption>
<span class="match-player__nickname">{{ prediction.created_by_user_alias }}</span>
<span class="match-player__name">{{ prediction.created_by_user_first_name + " " + prediction.created_by_user_last_name }}</span>
</figcaption>
</figure>
</a>
</td>