Bugfix/truncate long labels in page tabs (#7178)

* Truncate long labels

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed the layout of the page tabs component by truncating long labels
 - Fixed the display of assets without a currency in the search results of the assistant
 - Fixed the display of assets without a currency in the symbol autocomplete component
 

apps/client/src/styles.scss

@@ -376,12 +376,16 @@ ngx-skeleton-loader {
   visibility: hidden;
 }
 
+.lead {
+  font-weight: unset;
+}
+
 .line-height-1 {
   line-height: 1;
 }
 
-.lead {
-  font-weight: unset;
+.line-height-normal {
+  line-height: normal;
 }
 
 .mat-mdc-button-base {

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

@@ -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="d-none d-sm-block line-height-normal 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;