Task/improve style of settings tables in admin control panel (#7708)

* Improve style of settings table

* Update changelog

CHANGELOG.md

@@ -13,6 +13,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the table in the data providers management of the admin control panel
+- Improved the style of the table in the platform management of the admin control panel
+- Improved the style of the table in the tag management of the admin control panel
 - Improved the historical market data gathering by storing the market prices carried forward for the most recent dates without data from the data provider, distinguished by `isCarriedForward`
 - Introduced a cooldown of 12 hours for the historical market data gathering of a symbol by retaining the completed jobs
 

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

@@ -9,34 +9,40 @@
     Add Platform
   </a>
 </div>
-<table
+<div class="overflow-x-auto">
+  <table
     class="gf-table w-100"
     mat-table
     matSort
     matSortActive="name"
     matSortDirection="asc"
     [dataSource]="dataSource"
->
-  <ng-container matColumnDef="name">
-    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
-      <ng-container i18n>Name</ng-container>
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
+  >
+    <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>
         <gf-entity-logo
-        class="d-inline mr-1"
           [hasPlaceholder]="true"
           [tooltip]="element.name"
           [url]="element.url"
         />
-      <span>{{ element.name }}</span>
-    </td></ng-container
-  >
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef class="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>
+        {{ element.name }}
+      </td>
+    </ng-container>
 
     <ng-container matColumnDef="url">
       <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="url">
         <ng-container i18n>Url</ng-container>
       </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         {{ element.url }}
       </td>
     </ng-container>
@@ -94,7 +100,8 @@
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+  </table>
+</div>
 
 <mat-paginator
   [class.d-none]="dataSource.data.length <= pageSize"

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

@@ -61,7 +61,13 @@ export class GfAdminPlatformComponent implements OnInit {
   public readonly locale = input(getLocale());
 
   protected dataSource = new MatTableDataSource<Platform>();
-  protected readonly displayedColumns = ['name', 'url', 'accounts', 'actions'];
+  protected readonly displayedColumns = [
+    'icon',
+    'name',
+    'url',
+    'accounts',
+    'actions'
+  ];
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected platforms: Platform[];
 

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

@@ -40,6 +40,7 @@
           </mat-card-actions>
         </mat-card>
       }
+      <div class="overflow-x-auto">
         <table
           class="gf-table w-100"
           mat-table
@@ -48,6 +49,13 @@
           matSortDirection="asc"
           [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>
+              <gf-entity-logo [hasPlaceholder]="true" [url]="element.url" />
+            </td>
+          </ng-container>
+
           <ng-container matColumnDef="name">
             <th
               *matHeaderCellDef
@@ -57,14 +65,7 @@
             >
               <ng-container i18n>Name</ng-container>
             </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            <div class="d-flex align-items-center">
-              <gf-entity-logo
-                class="mr-1"
-                [hasPlaceholder]="true"
-                [url]="element.url"
-              />
-              <div>
+            <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
               @if (isGhostfolioDataProvider(element)) {
                 <a
                   class="align-items-center d-inline-flex"
@@ -98,8 +99,6 @@
               } @else {
                 {{ element.name }}
               }
-              </div>
-            </div>
             </td>
           </ng-container>
 
@@ -149,7 +148,9 @@
               ) {
                 <div
                   [matTooltip]="ghostfolioApiStatusTooltip"
-                [matTooltipDisabled]="!ghostfolioApiStatus.isWithinSetupPeriod"
+                  [matTooltipDisabled]="
+                    !ghostfolioApiStatus.isWithinSetupPeriod
+                  "
                 >
                   <mat-progress-bar
                     mode="determinate"
@@ -199,7 +200,7 @@
                   </mat-menu>
                 } @else if (hasGhostfolioApiKey === false) {
                   <button
-                  class="special"
+                    class="special text-nowrap"
                     mat-flat-button
                     (click)="onSetGhostfolioApiKey()"
                   >
@@ -213,6 +214,7 @@
           <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
           <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
         </table>
+      </div>
       @if (isLoading) {
         <ngx-skeleton-loader
           animation="pulse"

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

@@ -76,6 +76,7 @@ export class GfAdminSettingsComponent implements OnInit {
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
   public displayedColumns = [
+    'icon',
     'name',
     'status',
     'assetProfileCount',

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

@@ -9,28 +9,34 @@
     Add Tag
   </a>
 </div>
-<table
+<div class="overflow-x-auto">
+  <table
     class="gf-table w-100"
     mat-table
     matSort
     matSortActive="name"
     matSortDirection="asc"
     [dataSource]="dataSource"
->
+  >
     <ng-container matColumnDef="name">
       <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
         <ng-container i18n>Name</ng-container>
       </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         {{ translate(element.name) }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="userId">
-    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="userId">
+      <th
+        *matHeaderCellDef
+        class="px-1"
+        mat-header-cell
+        mat-sort-header="userId"
+      >
         <ng-container i18n>User</ng-container>
       </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <span class="text-monospace">{{ element.userId }}</span>
       </td>
     </ng-container>
@@ -114,7 +120,8 @@
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+  </table>
+</div>
 
 <mat-paginator
   [class.d-none]="dataSource.data.length <= pageSize"