feat: better table formatting

src/app/app.component.html

@@ -1,8 +1,3 @@
-<style>
-  *{
-    text-align: center;
-  }
-</style>
 <main class="main">
   <div class="row justify-content-md-center">
     <h1>Please select the number of teams:</h1>
@@ -40,7 +35,7 @@
   <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
   </form>
 
-  <table class="table table-striped">
+  <table class="table table-striped custom-table">
     <thead>
       <tr>
         <th scope="col">Size</th>
@@ -50,8 +45,8 @@
     <tbody>
       @for (team of teamsArray; track $index) {
         <tr>
-          <td>{{ team.length | number }}</td>
-          <td>{{ team }}</td>
+          <td style="text-wrap: wrap;">{{ team.length | number }}</td>
+          <td class="wrap-cell">{{ team }}</td>
         </tr>
       }
     </tbody>