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>

src/app/app.component.less

@@ -0,0 +1,11 @@
+*{
+    text-align: center;
+}
+.custom-table {
+    //table-layout: fixed;
+    width: 100%; /* Or a specific max-width */
+}
+.wrap-cell{
+    word-break: break-word;
+    white-space: normal;
+}

src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent implements OnInit {
   constructor(private activatedRoute: ActivatedRoute){}
 
   ngOnInit(): void {
-    //consiedr using Angular's ActivatedRoute here instead
+    //TODO consider using Angular's ActivatedRoute here instead
     const params = new URLSearchParams(window.location.search);
     const names = params.get('names')?.replaceAll(',', '\n');
     if (names) this.playerNamesValue = names;