Improve column width distribution

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>
-      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
+      <th
+        *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>
-            <td *matCellDef="let element" class="px-1" mat-cell>
+            <th
+              *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>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <th *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"
           [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>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <th
+        *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>
-            <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <th
+              *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>
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <th
+        *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