<div class="modal-content">
  <div class="modal-header">
    <h5 id="divinebonusDesc" translate>Divine Bonus</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" 
            aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <div class="alert alert-success" role="alert"
         *ngIf="divineBonus.error > 0" translate>
      Divine Bonus validated
    </div>
    
    <table class="table" aria-describedby="divinebonusDesc">
      <tr *ngFor="let bonus of divineBonusList">
        <td class="col-2">
          <div>
            <ew-icon name="{{ EwIcon.getDivineBonus(bonus.bonus_id) }}"></ew-icon>
            <div  class="badge bg-secondary">{{ bonus.nb }}</div>
          </div>
        </td>
        <th scope="row">
          <id-to-divinebonus [id]="bonus.bonus_id"></id-to-divinebonus>
        </th>
        <td>
          <button (click)="divineBonusUse(bonus.bonus_id)"
                  class="btn-primary"
                  translate>Use</button>
        </td>
      </tr>
    </table>
  </div>
  
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary"
            data-bs-dismiss="modal" translate>Close</button>
  </div>
</div>

<div class="modal-content">
  <div class="modal-header">
    <h5 id="divinebonusDesc" translate>Divine Bonus</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" 
            aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <div class="alert alert-success" role="alert"
         *ngIf="divineBonus.error > 0" translate>
      Divine Bonus validated
    </div>
    
    <table class="table table-middle align-middle"
           aria-describedby="divinebonusDesc">
      <tbody>
        <tr *ngFor="let bonus of divineBonusList">
          <td class="col-2">
            <div>
              <ew-icon name="{{ EwIcon.getDivineBonus(bonus.bonus_id) }}"></ew-icon>
              <div class="badge bg-secondary">{{ bonus.nb }}</div>
            </div>
          </td>
          <th scope="row">
            <id-to-divinebonus [id]="bonus.bonus_id"></id-to-divinebonus>
          </th>
          <td>
            <button (click)="divineBonusUse(bonus.bonus_id)" type="button"
                    class="btn btn-primary" translate>Use</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary"
            data-bs-dismiss="modal" translate>Close</button>
  </div>
</div>

Make the divine bonus list more user friendly
Make the divine bonus list more user friendly