Bugfix/missing list numbers of top and bottom holdings in Safari (#8090)

* Fix missing list numbers

* Update changelog

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed the missing list numbers in the top and bottom holdings on the analysis page in Safari
 - Fixed the missing first data point in the portfolio evolution chart on the analysis page
 - Fixed the missing mapping for Korea in the country weightings of the _Financial Modeling Prep_ service
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -330,7 +330,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ml-1 pl-3">
             @for (holding of top3; track holding) {
               <li class="py-1">
                 <a
@@ -342,8 +342,10 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 text-truncate">
+                  <div class="flex-grow-1 mr-2 name">
-                    {{ holding.assetProfile.name }}
+                    <span class="align-top d-inline-block mw-100 text-truncate">
+                      {{ holding.assetProfile.name }}
+                    </span>
                   </div>
                   <div class="d-flex justify-content-end">
                     <gf-value
@@ -381,7 +383,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ml-1 pl-3">
             @for (holding of bottom3; track holding) {
               <li class="py-1">
                 <a
@@ -393,8 +395,10 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 text-truncate">
+                  <div class="flex-grow-1 mr-2 name">
-                    {{ holding.assetProfile.name }}
+                    <span class="align-top d-inline-block mw-100 text-truncate">
+                      {{ holding.assetProfile.name }}
+                    </span>
                   </div>
                   <div class="d-flex justify-content-end">
                     <gf-value

apps/client/src/app/pages/portfolio/analysis/analysis-page.scss

@@ -4,4 +4,12 @@
   .chart-container {
     aspect-ratio: 16 / 9;
   }
+
+  .holdings {
+    .name {
+      // Safari puts the list marker into this element, so the truncation is
+      // on the inner element (a hidden overflow here hides the marker)
+      min-width: 0;
+    }
+  }
 }