From e390ef7be49a292892b8224d54b6429bc50a4db0 Mon Sep 17 00:00:00 2001
From: "Fabio Azevedo (CTW)" <Fabio.AM.Azevedo@ctw.bmwgroup.com>
Date: Tue, 2 May 2023 00:31:57 +0100
Subject: [PATCH] Styling changes

---
 .../platform/platform.component.html          | 164 +++++++++---------
 .../platform/platform.component.scss          |   6 +-
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/apps/client/src/app/components/platform/platform.component.html b/apps/client/src/app/components/platform/platform.component.html
index e1024db21..0a92ef4fe 100644
--- a/apps/client/src/app/components/platform/platform.component.html
+++ b/apps/client/src/app/components/platform/platform.component.html
@@ -1,90 +1,98 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <div class="platforms">
-        <table
-          class="gf-table w-100"
-          mat-table
-          matSort
-          matSortActive="id"
-          matSortDirection="asc"
-          [dataSource]="dataSource"
+      <table
+        class="gf-table w-100"
+        mat-table
+        matSort
+        matSortActive="id"
+        matSortDirection="asc"
+        [dataSource]="dataSource"
+      >
+        <ng-container matColumnDef="id">
+          <th
+            *matHeaderCellDef
+            class="px-1 mat-mdc-header-cell"
+            mat-header-cell
+            mat-sort-header="id"
+          >
+            <ng-container i18n>Id</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            <span class="d-none d-sm-inline-block">{{ element.id }}</span>
+            <span class="d-inline-block d-sm-none">{{
+              (element.id | slice : 0 : 5) + '...'
+            }}</span>
+          </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" mat-cell>
+            <gf-symbol-icon
+              *ngIf="element.url"
+              class="d-inline mr-1"
+              [tooltip]="element.name"
+              [url]="element.url"
+            ></gf-symbol-icon>
+            <span>{{ element.name }} </span>
+          </td></ng-container
         >
-          <ng-container matColumnDef="id">
-            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-              <ng-container i18n>Id</ng-container>
-            </th>
-            <td
-              *matCellDef="let element"
-              class="d-none d-lg-table-cell px-1"
-              mat-cell
-            >
-              {{ element.id }}
-            </td>
-          </ng-container>
 
-          <ng-container matColumnDef="name">
-            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-              <ng-container i18n>Name</ng-container>
-            </th>
-            <td *matCellDef="let element" class="px-1" mat-cell>
-              <gf-symbol-icon
-                *ngIf="element.url"
-                class="d-inline d-sm-none mr-1"
-                [tooltip]="element.name"
-                [url]="element.url"
-              ></gf-symbol-icon>
-              <span>{{ element.name }} </span>
-            </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>
+            {{ element.url }}
+          </td>
+        </ng-container>
 
-          <ng-container matColumnDef="url">
-            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-              <ng-container i18n>Url</ng-container>
-            </th>
-            <td
-              *matCellDef="let element"
-              class="d-none d-lg-table-cell px-1"
-              mat-cell
+        <ng-container matColumnDef="actions">
+          <th
+            *matHeaderCellDef
+            class="px-1 text-center"
+            i18n
+            mat-header-cell
+          ></th>
+          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <button
+              class="mx-1 no-min-width px-2"
+              mat-button
+              [matMenuTriggerFor]="platformMenu"
+              (click)="$event.stopPropagation()"
             >
-              {{ element.url }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="actions">
-            <th
-              *matHeaderCellDef
-              class="px-1 text-center"
-              i18n
-              mat-header-cell
-            ></th>
-            <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-              <button
-                class="mx-1 no-min-width px-2"
-                mat-button
-                [matMenuTriggerFor]="platformMenu"
-                (click)="$event.stopPropagation()"
-              >
-                <ion-icon name="ellipsis-vertical"></ion-icon>
+              <ion-icon name="ellipsis-vertical"></ion-icon>
+            </button>
+            <mat-menu #platformMenu="matMenu" xPosition="before">
+              <button mat-menu-item (click)="onUpdatePlatform(element)">
+                <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                <span i18n>Edit</span>
+              </button>
+              <button mat-menu-item (click)="deletePlatform(element.id)">
+                <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                <span i18n>Delete</span>
               </button>
-              <mat-menu #platformMenu="matMenu" xPosition="before">
-                <button mat-menu-item (click)="onUpdatePlatform(element)">
-                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
-                  <span i18n>Edit</span>
-                </button>
-                <button mat-menu-item (click)="deletePlatform(element.id)">
-                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-                  <span i18n>Delete</span>
-                </button>
-              </mat-menu>
-            </td>
-            <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-          </ng-container>
+            </mat-menu>
+          </td>
+          <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+        </ng-container>
 
-          <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-          <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-        </table>
-      </div>
+        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+      </table>
     </div>
   </div>
 
diff --git a/apps/client/src/app/components/platform/platform.component.scss b/apps/client/src/app/components/platform/platform.component.scss
index bd9796d74..185523e4c 100644
--- a/apps/client/src/app/components/platform/platform.component.scss
+++ b/apps/client/src/app/components/platform/platform.component.scss
@@ -1,10 +1,8 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
-  .platforms {
-    overflow-x: auto;
-  }
-
   .fab-container {
     position: fixed;
     right: 2rem;