Make user names in groups visible even with long usernames

Frontend Angular 4/src/app/layout/grupos/grupos.component.html

@@ -116,14 +116,20 @@
                   <div
                     *ngFor="let user of grupoSeleccionado.users"
                     (click)="seleccionarUser(user)"
-                    class="col-sm-3 matefun-group-wrapper"
+                    class="col-sm-3 matefun-group-wrapper group"
                   >
                     <i
                       class="fa fa-user matefun-fa-user"
                       aria-hidden="true"
                     ></i>
-                    <p>
+                    <p
+                      class="overflow-hidden text-ellipsis group-hover:overflow-visible group-hover:z-10 group-hover:relative"
+                    >
+                      <span
+                        class="group-hover:bg-main-blue group-hover:text-white group-hover:rounded-sm"
+                      >
                         {{ user.username }}
+                      </span>
                     </p>
                   </div>
                 </div>

Frontend Angular 4/src/app/shared/components/add-users-modal/add-users-modal.component.html

@@ -37,7 +37,7 @@
         <td>
           <div class="overflow-hidden text-ellipsis hover:overflow-visible">
             <span
-              class="hover:bg-black hover:text-white hover:z-10 hover:relative"
+              class="hover:bg-main-blue hover:text-white hover:z-10 hover:relative"
             >
               {{ user.username }}
             </span>