Improve column width distribution

apps/client/src/styles.scss

@@ -349,6 +349,11 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
+.gf-fit-content {
+  white-space: nowrap;
+  width: 1%;
+}
+
 .gf-pointer-events-none {
   pointer-events: none;
 }
@@ -361,6 +366,10 @@ ngx-skeleton-loader {
   @include table.gf-table;
 }
 
+.gf-table-column-fill {
+  width: 100%;
+}
+
 .gf-text-wrap-balance {
   text-wrap: balance;
 }

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -61,8 +61,16 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+      <th
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        *matHeaderCellDef
+        class="gf-fit-content px-1 text-center"
+        mat-header-cell
+      ></th>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-center"
+        mat-cell
+      >
         @if (showActions()) {
           <button
             class="mx-1 no-min-width px-2"

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

@@ -24,12 +24,12 @@
     <ng-container matColumnDef="status">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1"
+        class="d-none d-lg-table-cell gf-fit-content px-1"
         mat-header-cell
       ></th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1"
+        class="d-none d-lg-table-cell gf-fit-content px-1"
         mat-cell
       >
         <div class="d-flex justify-content-center">
@@ -40,16 +40,25 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-none d-lg-table-cell px-1"
+        class="d-none d-lg-table-cell gf-fit-content px-1"
         mat-footer-cell
       ></td>
     </ng-container>
 
     <ng-container matColumnDef="account">
-      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
+      <th
+        *matHeaderCellDef
+        class="gf-table-column-fill px-1"
+        mat-header-cell
+        mat-sort-header="name"
+      >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-table-column-fill px-1 text-nowrap"
+        mat-cell
+      >
         <gf-entity-logo
           class="d-inline d-sm-none mr-1"
           [hasPlaceholder]="true"
@@ -93,7 +102,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1"
+        class="d-none d-lg-table-cell px-1 text-nowrap"
         mat-cell
       >
         <div class="d-flex">
@@ -316,8 +325,16 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+      <th
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        *matHeaderCellDef
+        class="gf-fit-content px-1 text-center"
+        mat-header-cell
+      ></th>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-center"
+        mat-cell
+      >
         <button
           class="mx-1 no-min-width px-2"
           mat-button
@@ -364,7 +381,7 @@
           }
         </mat-menu>
       </td>
-      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+      <td *matFooterCellDef class="gf-fit-content px-1" mat-footer-cell></td>
     </ng-container>
 
     <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>

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

@@ -167,8 +167,12 @@
     </ng-container>
 
     <ng-container matColumnDef="icon" sticky>
-      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+      <th *matHeaderCellDef class="gf-fit-content px-1" mat-header-cell></th>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-center"
+        mat-cell
+      >
         <gf-entity-logo
           [dataSource]="element.assetProfile?.dataSource"
           [symbol]="element.assetProfile?.symbol"
@@ -178,10 +182,14 @@
     </ng-container>
 
     <ng-container matColumnDef="nameWithSymbol">
-      <th *matHeaderCellDef class="px-1" mat-header-cell>
+      <th *matHeaderCellDef class="gf-table-column-fill px-1" mat-header-cell>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-normal px-1" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-table-column-fill line-height-normal px-1"
+        mat-cell
+      >
         <div class="align-items-center d-flex text-nowrap">
           <span class="text-truncate">{{ element.assetProfile?.name }}</span>
           @if (isDraftActivity(element)) {
@@ -402,7 +410,11 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
+      <th
+        *matHeaderCellDef
+        class="gf-fit-content px-1 text-center"
+        mat-header-cell
+      >
         @if (
           !hasPermissionToImportActivities && hasPermissionToExportActivities
         ) {

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -8,8 +8,12 @@
     [dataSource]="dataSource"
   >
     <ng-container matColumnDef="icon" sticky>
-      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+      <th *matHeaderCellDef class="gf-fit-content px-1" mat-header-cell></th>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-center"
+        mat-cell
+      >
         <gf-entity-logo
           [dataSource]="element.dataSource"
           [symbol]="element.symbol"
@@ -19,12 +23,17 @@
     </ng-container>
 
     <ng-container matColumnDef="name">
-      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+      <th
+        *matHeaderCellDef
+        class="gf-table-column-fill px-1"
+        mat-header-cell
+        mat-sort-header
+      >
         <ng-container i18n>Name</ng-container>
       </th>
       <td
         *matCellDef="let element"
-        class="line-height-normal px-1 text-nowrap"
+        class="gf-table-column-fill line-height-normal px-1 text-nowrap"
         mat-cell
       >
         <div class="text-truncate">

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

@@ -8,8 +8,12 @@
     [matSortDirection]="sortDirection()"
   >
     <ng-container matColumnDef="icon" sticky>
-      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+      <th *matHeaderCellDef class="gf-fit-content px-1" mat-header-cell></th>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-center"
+        mat-cell
+      >
         <gf-entity-logo
           [dataSource]="element.assetProfile.dataSource"
           [symbol]="element.assetProfile.symbol"
@@ -21,13 +25,17 @@
     <ng-container matColumnDef="nameWithSymbol">
       <th
         *matHeaderCellDef
-        class="px-1"
+        class="gf-table-column-fill px-1"
         mat-header-cell
         mat-sort-header="assetProfile.name"
       >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-normal px-1" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-table-column-fill line-height-normal px-1"
+        mat-cell
+      >
         <div class="text-truncate">
           {{ element.assetProfile.name }}
           @if (element.assetProfile.name === element.assetProfile.symbol) {
@@ -161,14 +169,14 @@
     <ng-container matColumnDef="performanceInPercentage" stickyEnd>
       <th
         *matHeaderCellDef
-        class="justify-content-end px-1"
+        class="gf-fit-content justify-content-end px-1"
         mat-header-cell
         mat-sort-header="netPerformancePercentWithCurrencyEffect"
       >
         <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="gf-fit-content px-1" mat-cell>
         <div class="d-flex justify-content-end">
           <gf-value
             [colorizeSign]="true"

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

@@ -5,17 +5,11 @@
     multiTemplateDataRows
     [dataSource]="dataSource"
   >
-    <colgroup>
-      <col class="w-100" />
-      <col />
-      <col />
-    </colgroup>
-
     <ng-container matColumnDef="name">
-      <th *matHeaderCellDef class="px-2" mat-header-cell>
+      <th *matHeaderCellDef class="gf-table-column-fill px-2" mat-header-cell>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-2" mat-cell>
+      <td *matCellDef="let element" class="gf-table-column-fill px-2" mat-cell>
         <div class="text-truncate">{{ prettifyAssetName(element?.name) }}</div>
       </td>
     </ng-container>
@@ -65,16 +59,10 @@
               mat-table
               [dataSource]="element.parents"
             >
-              <colgroup>
-                <col class="w-100" />
-                <col />
-                <col />
-              </colgroup>
-
               <ng-container matColumnDef="name">
                 <td
                   *matCellDef="let parentHolding"
-                  class="line-height-normal px-2"
+                  class="gf-table-column-fill line-height-normal px-2"
                   mat-cell
                 >
                   <div class="text-truncate">{{ parentHolding?.name }}</div>