Merge b590a95296 into f0f8d82b49

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added a simplified mode to the holdings table component
 
+### Changed
+
+- Improved the column width distribution of various table components
+
 ## 3.67.1 - 2026-09-05
 
 ### Added

apps/client/src/app/components/access-table/access-table.component.html

@@ -1,8 +1,19 @@
 <div class="overflow-x-auto">
   <table class="gf-table w-100" mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="alias">
-      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
+      <th
-      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
+        *matHeaderCellDef
+        class="gf-table-column-fill px-1"
+        i18n
+        mat-header-cell
+      >
+        Alias
+      </th>
+      <td
+        *matCellDef="let element"
+        class="gf-table-column-fill px-1 text-nowrap"
+        mat-cell
+      >
         {{ element.alias }}
       </td>
     </ng-container>
@@ -46,9 +57,17 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-right" mat-header-cell></th>
+      <th
+        *matHeaderCellDef
+        class="gf-fit-content px-1 text-right"
+        mat-header-cell
+      ></th>
 
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="gf-fit-content px-1 text-right"
+        mat-cell
+      >
         <button
           class="mx-1 no-min-width px-2"
           mat-button

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -27,13 +27,17 @@
         <ng-container matColumnDef="index">
           <th
             *matHeaderCellDef
-            class="justify-content-end px-1 py-2"
+            class="gf-table-column-fill justify-content-end px-1 py-2"
             mat-header-cell
             mat-sort-header="id"
           >
             <ng-container i18n>Job ID</ng-container>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td
+            *matCellDef="let element"
+            class="gf-table-column-fill px-1 py-2 text-right"
+            mat-cell
+          >
             {{ element.id }}
           </td>
         </ng-container>
@@ -179,7 +183,11 @@
         </ng-container>
 
         <ng-container matColumnDef="actions" stickyEnd>
-          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="gf-fit-content px-1 py-2 text-right"
+            mat-header-cell
+          >
             <button
               class="mx-1 no-min-width px-2"
               mat-button

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -23,12 +23,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
             >
               @if (!element.isActive) {
@@ -49,8 +49,12 @@
           </ng-container>
 
           <ng-container matColumnDef="select">
-            <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+            <th
-            <td *matCellDef="let element" class="px-1" mat-cell>
+              *matHeaderCellDef
+              class="gf-fit-content px-1"
+              mat-header-cell
+            ></th>
+            <td *matCellDef="let element" class="gf-fit-content px-1" mat-cell>
               @if (
                 canDeleteAssetProfile({
                   activitiesCount: element.activitiesCount,
@@ -81,7 +85,7 @@
           <ng-container matColumnDef="nameWithSymbol">
             <th
               *matHeaderCellDef
-              class="px-1"
+              class="gf-table-column-fill px-1"
               mat-header-cell
               mat-sort-header="symbol"
             >
@@ -89,7 +93,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1"
+              class="gf-table-column-fill line-height-normal px-1"
               mat-cell
             >
               <div class="text-truncate">{{ element.name }}</div>
@@ -243,7 +247,11 @@
           </ng-container>
 
           <ng-container matColumnDef="actions" stickyEnd>
-            <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+            <th
+              *matHeaderCellDef
+              class="gf-fit-content px-1 text-right"
+              mat-header-cell
+            >
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -161,10 +161,18 @@
                 [dataSource]="couponsDataSource"
               >
                 <ng-container matColumnDef="code">
-                  <th *matHeaderCellDef class="px-1" mat-header-cell>
+                  <th
+                    *matHeaderCellDef
+                    class="gf-table-column-fill px-1"
+                    mat-header-cell
+                  >
                     <ng-container i18n>Code</ng-container>
                   </th>
-                  <td *matCellDef="let element" class="px-1" mat-cell>
+                  <td
+                    *matCellDef="let element"
+                    class="gf-table-column-fill px-1"
+                    mat-cell
+                  >
                     <gf-value
                       class="text-monospace"
                       [enableCopyToClipboardButton]="true"
@@ -206,12 +214,12 @@
                 <ng-container matColumnDef="actions" stickyEnd>
                   <th
                     *matHeaderCellDef
-                    class="px-1 text-right"
+                    class="gf-fit-content px-1 text-right"
                     mat-header-cell
                   ></th>
                   <td
                     *matCellDef="let element"
-                    class="px-1 text-right"
+                    class="gf-fit-content px-1 text-right"
                     mat-cell
                   >
                     <button

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -19,8 +19,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
           [hasPlaceholder]="true"
           [tooltip]="element.name"
@@ -30,10 +34,19 @@
     </ng-container>
 
     <ng-container matColumnDef="name">
-      <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
+      >
         {{ element.name }}
       </td>
     </ng-container>
@@ -66,8 +79,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

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -50,8 +50,16 @@
           [dataSource]="dataSource"
         >
           <ng-container matColumnDef="icon" sticky>
-            <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+            <th
-            <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+              *matHeaderCellDef
+              class="gf-fit-content px-1"
+              mat-header-cell
+            ></th>
+            <td
+              *matCellDef="let element"
+              class="gf-fit-content px-1 text-center"
+              mat-cell
+            >
               <gf-entity-logo [hasPlaceholder]="true" [url]="element.url" />
             </td>
           </ng-container>
@@ -59,13 +67,17 @@
           <ng-container matColumnDef="name">
             <th
               *matHeaderCellDef
-              class="px-1"
+              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
+            >
               @if (isGhostfolioDataProvider(element)) {
                 <a
                   class="align-items-center d-inline-flex"
@@ -173,9 +185,17 @@
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <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-right" mat-cell>
+            <td
+              *matCellDef="let element"
+              class="gf-fit-content px-1 text-right"
+              mat-cell
+            >
               @if (isGhostfolioDataProvider(element)) {
                 @if (hasGhostfolioApiKey) {
                   <button

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -19,10 +19,19 @@
     [dataSource]="dataSource"
   >
     <ng-container matColumnDef="name">
-      <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
+      >
         {{ translate(element.name) }}
       </td>
     </ng-container>
@@ -78,8 +87,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

apps/client/src/app/components/admin-users/admin-users.html

@@ -6,14 +6,14 @@
           <ng-container matColumnDef="user">
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2"
+              class="gf-table-column-fill mat-mdc-header-cell px-1 py-2"
               mat-header-cell
             >
               <ng-container i18n>User</ng-container>
             </th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2"
+              class="gf-table-column-fill mat-mdc-cell px-1 py-2"
               mat-cell
             >
               <div class="align-items-center d-flex text-nowrap">
@@ -193,12 +193,12 @@
           <ng-container matColumnDef="actions" stickyEnd>
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="gf-fit-content mat-mdc-header-cell px-1 py-2 text-right"
               mat-header-cell
             ></th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="gf-fit-content mat-mdc-cell px-1 py-2 text-right"
               mat-cell
             >
               <button

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>