feat: team list UI finetune

web/src/app/components/teams/teams.component.css

 
 .teams {
   list-style-type: none;
-  width: 15em;
+  width: 30rem;
 }
 
 .teams li {
@@ -10,10 +10,13 @@
   left: 0;
   background-color: #EEE;
   height: fit-content;
+  width: fit-content;
   border-radius: 4px;
   align-items: center;
-  vertical-align: center;
+  vertical-align: middle;
   margin-bottom: 1rem;
+  white-space: nowrap;
+  padding: 0.2rem;
 }
 
 .teams li:hover {
@@ -39,14 +42,24 @@
 
 .teams .badge {
   display: inline-block;
+  height:max-content;
   font-size: small;
   color: white;
   background-color: #405061;
-  line-height: 1em;
   position: relative;
-
 }
 
+.teams .text {
+    margin-top: 1.2rem;
+    place-self: center;
+    vertical-align: middle;
+    height: fit-content;
+    font-size: large;
+    color: black;
+    position: relative;
+    padding-left: 0.3rem;
+  }
+
 input {
   padding: .5rem;
 }

web/src/app/components/teams/teams.component.html

-<h2>Teams</h2>
+<h2 class="fw-bold ms-4 mt-1 fs-2">Teams</h2>
 <ul class="teams">
   <li *ngFor="let team of teams">
-    <span class="badge">{{team.id}}</span> {{team.name}}
+    <span class="badge">{{team.id}}</span>
+    <span class="text">{{team.name}}</span>
   </li>
 </ul>