Improve column headers in holdings table for mobile (#2071)

* Improve column headers in holdings table for mobile

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Extracted the symbol search to a dedicated component
+- Improved the column headers in the holdings table for mobile
 - Upgraded `prisma` from version `4.14.1` to `4.15.0`
 
 ## 1.280.1 - 2023-06-10

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -92,7 +92,8 @@
         mat-header-cell
         mat-sort-header
       >
-        <ng-container i18n>Allocation</ng-container>
+        <span class="d-none d-sm-block" i18n>Allocation</span>
+        <span class="d-block d-sm-none" title="Allocation">%</span>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex justify-content-end">
@@ -108,17 +109,14 @@
     <ng-container matColumnDef="performance">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 justify-content-end"
+        class="justify-content-end px-1"
         mat-header-cell
         mat-sort-header="netPerformancePercent"
       >
-        <ng-container i18n>Performance</ng-container>
+        <span class="d-none d-sm-block" i18n>Performance</span>
+        <span class="d-block d-sm-none" title="Performance">±</span>
       </th>
-      <td
-        *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1"
-        mat-cell
-      >
+      <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex justify-content-end">
           <gf-value
             [colorizeSign]="true"