From 120f9a85688cdabf985cb38cfc1fc0163eb2757e Mon Sep 17 00:00:00 2001
From: Red Rose <146128882+RED-ROSE515@users.noreply.github.com>
Date: Wed, 1 Jul 2026 20:31:28 -0500
Subject: [PATCH] fix: truncate page tab labels

---
 .../lib/page-tabs/page-tabs.component.html    | 20 +++--
 .../lib/page-tabs/page-tabs.component.scss    |  5 ++
 .../lib/page-tabs/page-tabs.component.spec.ts | 83 +++++++++++++++++++
 3 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 libs/ui/src/lib/page-tabs/page-tabs.component.spec.ts

diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.html b/libs/ui/src/lib/page-tabs/page-tabs.component.html
index 2898bcc79..7cc03a03d 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.html
+++ b/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>
-  <ion-icon
-    [name]="tab.iconName"
-    [size]="deviceType === 'mobile' ? 'large' : 'small'"
-  />
-  <div class="d-none d-sm-block ml-1" [innerHTML]="tab.label"></div>
+  <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'"
+    />
+    <span
+      class="col d-none d-sm-block ml-1 overflow-hidden p-0 text-truncate"
+      [innerHTML]="tab.label"
+    ></span>
+  </span>
 </ng-template>
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
index ffb3ff33c..246a6147d 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss
+++ b/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;
 
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.spec.ts b/libs/ui/src/lib/page-tabs/page-tabs.component.spec.ts
new file mode 100644
index 000000000..5ad6c1523
--- /dev/null
+++ b/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'
+    );
+  });
+});