Task/improve simplified mode in holdings table (#7875)

* Improve simplified mode

* Update changelog

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the style of the activity type filter on the activities page (experimental)
 - Improved the style of the no activities info component
 - Improved the style of the selector in the benchmark comparator
+- Improved the responsive layout of the holdings table in simplified mode
 - Improved the language localization for Chinese (`zh`)
 - Improved the language localization for German (`de`)
 - Upgraded `@codewithdan/observable-store` from version `2.2.15` to `3.0.0`

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

@@ -3,13 +3,19 @@
     class="gf-table w-100"
     mat-table
     matSort
+    [class.simple]="mode() === 'simple'"
     [dataSource]="dataSource"
     [matSortActive]="sortActive()"
     [matSortDirection]="sortDirection()"
   >
-    <ng-container matColumnDef="icon" sticky>
+    <ng-container matColumnDef="icon" [sticky]="mode() === 'default'">
       <th *matHeaderCellDef class="px-1" mat-header-cell></th>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="px-1 text-center"
+        mat-cell
+        [class.text-nowrap]="mode() === 'simple'"
+      >
         <gf-entity-logo
           [dataSource]="element.assetProfile.dataSource"
           [symbol]="element.assetProfile.symbol"
@@ -27,8 +33,13 @@
       >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-normal px-1" mat-cell>
+      <td
-        <div class="text-truncate">
+        *matCellDef="let element"
+        class="line-height-normal px-1"
+        mat-cell
+        [class.w-100]="mode() === 'simple'"
+      >
+        <div class="text-truncate" [title]="element.assetProfile.name">
           {{ element.assetProfile.name }}
           @if (element.assetProfile.name === element.assetProfile.symbol) {
             <span>({{ element.assetProfile.assetSubClassLabel }})</span>
@@ -160,7 +171,10 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="performanceInPercentage" stickyEnd>
+    <ng-container
+      matColumnDef="performanceInPercentage"
+      [stickyEnd]="mode() === 'default'"
+    >
       <th
         *matHeaderCellDef
         class="justify-content-end px-1"
@@ -170,7 +184,12 @@
         <span class="d-none d-sm-block" i18n>Performance</span>
         <span class="d-block d-sm-none" i18n-title title="Performance">±</span>
       </th>
-      <td *matCellDef="let element" class="px-1" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="px-1"
+        mat-cell
+        [class.text-nowrap]="mode() === 'simple'"
+      >
         <div class="d-flex justify-content-end">
           <gf-value
             [colorizeSign]="true"

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

@@ -1,3 +1,16 @@
 :host {
   display: block;
+
+  .gf-table {
+    &.simple {
+      .mat-column-icon,
+      .mat-column-performanceInPercentage {
+        width: min-content;
+      }
+
+      .mat-column-nameWithSymbol {
+        max-width: 0;
+      }
+    }
+  }
 }