Fix bug of header getting to bix and resolve conversation from paco

frontend/src/app/components/team-filter/team-filter.component.html

@@ -1,7 +1,4 @@
-<mat-chip-listbox
-  [ngStyle]="{ height: showMoreTeams ? '100%' : '85px' }"
-  class="chip-list overflow-hidden w-100 d-grid"
->
+<mat-chip-listbox class="chip-list overflow-hidden w-100 d-grid">
   <!-- Button to select all teams -->
   <button (click)="toggleAll()" class="icon-button team-button focus-outline d-none d-sm-block">
     <mat-chip
@@ -20,7 +17,7 @@
     class="icon-button focus-outline m-1"
   >
     <mat-chip [highlighted]="activeTeams.includes(team.id)" color="primary">
-      <p class="d-sm-none d-block">{{ getTeamName(team.id) }}</p>
+      <p class="d-sm-none d-block text-truncate chip-team-name">{{ getTeamName(team.id) }}</p>
       <p class="d-none d-sm-block">{{ team.name }}</p>
     </mat-chip>
   </button>

frontend/src/app/components/team-filter/team-filter.component.scss

@@ -1,4 +1,3 @@
-.team-button {
-  width: fit-content;
-  height: fit-content;
+.chip-team-name {
+  max-width: 80px;
 }

frontend/src/app/components/team-filter/team-filter.component.ts

@@ -11,6 +11,7 @@ import { extractTeamsFromUser } from '../../shared/types/model/User';
 @Component({
   selector: 'app-team-filter',
   templateUrl: './team-filter.component.html',
+  styleUrls: ['./team-filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TeamFilterComponent implements OnInit, OnDestroy {
@@ -102,9 +103,6 @@ export class TeamFilterComponent implements OnInit, OnDestroy {
 
   getTeamName(id: number): string {
     let teamName = this.teams$.getValue().find((team) => team.id === id)?.name;
-    if (teamName && teamName.length > 10) {
-      teamName = teamName.substring(0, 10) + '...';
-    }
     return teamName ?? 'no team name';
   }
 }