From a9526430c2a6858ff397f747b8007808b0b16aa4 Mon Sep 17 00:00:00 2001
From: Francisco Silva <franciscojjsilva@gmail.com>
Date: Tue, 13 Jun 2023 21:00:56 +0200
Subject: [PATCH] Improve column headers in holdings table for mobile (#2071)

* Improve column headers in holdings table for mobile

* Update changelog
---
 CHANGELOG.md                                       |  1 +
 .../holdings-table/holdings-table.component.html   | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9f9f0fce..f7444cd32 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index 9bda316c4..5be58e663 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/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"