Clean up

apps/client/src/styles.scss

@@ -380,6 +380,10 @@ ngx-skeleton-loader {
   line-height: 1;
 }
 
+.line-height-normal {
+  line-height: normal;
+}
+
 .lead {
   font-weight: unset;
 }

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

@@ -12,7 +12,7 @@
     @if (tab.showCondition !== false) {
       @if (tab.onClick) {
         <button
-          class="justify-content-start no-min-width overflow-hidden px-2 text-left"
+          class="no-min-width overflow-hidden px-2"
           mat-tab-link
           type="button"
           (click)="tab.onClick()"
@@ -28,7 +28,7 @@
       } @else {
         <a
           #rla="routerLinkActive"
-          class="justify-content-start no-min-width overflow-hidden px-2 text-left"
+          class="no-min-width overflow-hidden px-2"
           mat-tab-link
           routerLinkActive
           [active]="rla.isActive"
@@ -52,7 +52,7 @@
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
     <span
-      class="col d-none d-sm-block ml-1 overflow-hidden p-0 text-truncate"
+      class="col d-none d-sm-block line-height-normal ml-1 overflow-hidden p-0 text-truncate"
       [innerHTML]="tab.label"
     ></span>
   </span>

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

@@ -1,83 +0,0 @@
-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'
-    );
-  });
-});