fix(ui): derive page tab label width

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

@@ -47,8 +47,7 @@
     [size]="deviceType === 'mobile' ? 'large' : 'small'"
   />
   <div
-    class="d-none d-sm-block ml-1 text-truncate"
+    class="d-none d-sm-block flex-grow-1 ml-1 page-tab-label text-truncate"
-    style="max-width: 10.5rem"
     [innerHTML]="tab.label"
   ></div>
 </ng-template>

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

@@ -61,6 +61,16 @@
             justify-content: flex-start;
             margin: 0 0.5rem 0.1rem 0.5rem;
 
+            .mdc-tab__content,
+            .mdc-tab__text-label {
+              min-width: 0;
+              width: 100%;
+            }
+
+            .mdc-tab__text-label {
+              display: flex;
+            }
+
             &.mdc-tab--active {
               background-color: rgba(var(--palette-foreground-base), 0.05);
               font-weight: 500;
@@ -72,6 +82,10 @@
   }
 }
 
+.page-tab-label {
+  min-width: 0;
+}
+
 :host-context(.theme-dark) {
   @media (min-width: 576px) {
     @include mat.tabs-overrides(