fix: truncate page tab labels

libs/ui/src/lib/page-tabs/page-tabs.component.html

@@ -12,7 +12,7 @@
     @if (tab.showCondition !== false) {
       @if (tab.onClick) {
         <button
-          class="no-min-width overflow-hidden px-2"
+          class="justify-content-start no-min-width overflow-hidden px-2 text-left"
           mat-tab-link
           type="button"
           (click)="tab.onClick()"
@@ -28,7 +28,7 @@
       } @else {
         <a
           #rla="routerLinkActive"
-          class="no-min-width overflow-hidden px-2"
+          class="justify-content-start no-min-width overflow-hidden px-2 text-left"
           mat-tab-link
           routerLinkActive
           [active]="rla.isActive"
@@ -45,9 +45,15 @@
 </nav>
 
 <ng-template #tabContent let-tab>
+  <span class="align-items-center d-flex justify-content-start text-left w-100">
     <ion-icon
+      class="flex-shrink-0"
       [name]="tab.iconName"
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
-  <div class="d-none d-sm-block ml-1" [innerHTML]="tab.label"></div>
+    <span
+      class="col d-none d-sm-block ml-1 overflow-hidden p-0 text-truncate"
+      [innerHTML]="tab.label"
+    ></span>
+  </span>
 </ng-template>

libs/ui/src/lib/page-tabs/page-tabs.component.scss

@@ -56,6 +56,11 @@
         padding: 2rem 0;
         width: 14rem;
 
+        .mat-mdc-tab-list,
+        .mat-mdc-tab-links {
+          width: 100%;
+        }
+
         .mat-mdc-tab-links {
           flex-direction: column;
 

libs/ui/src/lib/page-tabs/page-tabs.component.spec.ts

@@ -0,0 +1,83 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeviceDetectorService } from 'ngx-device-detector';
+
+import { GfPageTabsComponent } from './page-tabs.component';
+
+jest.mock('@ionic/angular/standalone', () => {
+  const angularCore =
+    jest.requireActual<typeof import('@angular/core')>('@angular/core');
+
+  class IonIconMockComponent {
+    public readonly name = angularCore.input<string>();
+    public readonly size = angularCore.input<string>();
+  }
+
+  angularCore.Component({
+    selector: 'ion-icon',
+    standalone: true,
+    template: ''
+  })(IonIconMockComponent);
+
+  return { IonIcon: IonIconMockComponent };
+});
+
+describe('GfPageTabsComponent', () => {
+  let fixture: ComponentFixture<GfPageTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GfPageTabsComponent],
+      providers: [
+        {
+          provide: DeviceDetectorService,
+          useValue: {
+            getDeviceInfo: () => ({ deviceType: 'desktop' })
+          }
+        }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GfPageTabsComponent);
+  });
+
+  it('renders labels in a constrained Bootstrap truncation layout', async () => {
+    fixture.componentRef.setInput('tabs', [
+      {
+        iconName: 'open-outline',
+        label: 'A very long tab label that should be truncated',
+        onClick: jest.fn()
+      }
+    ]);
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const nativeElement = fixture.nativeElement as HTMLElement;
+    const tabContent = nativeElement.querySelector<HTMLElement>(
+      '.mdc-tab__text-label > .d-flex'
+    );
+
+    expect(tabContent).not.toBeNull();
+
+    const tab = tabContent.closest<HTMLElement>('a, button');
+    const icon = tabContent.querySelector<HTMLElement>('ion-icon');
+    const label = tabContent.querySelector<HTMLElement>('.text-truncate');
+
+    expect(tab).not.toBeNull();
+    expect(icon).not.toBeNull();
+    expect(label).not.toBeNull();
+
+    expect(tab.classList).toContain('justify-content-start');
+    expect(tab.classList).toContain('text-left');
+    expect(tabContent.classList).toContain('justify-content-start');
+    expect(tabContent.classList).toContain('text-left');
+    expect(tabContent.classList).toContain('w-100');
+    expect(icon.classList).toContain('flex-shrink-0');
+    expect(label.classList).toContain('col');
+    expect(label.classList).toContain('overflow-hidden');
+    expect(label.classList).toContain('p-0');
+    expect(label.textContent).toBe(
+      'A very long tab label that should be truncated'
+    );
+  });
+});