Styling changes

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

@@ -1,7 +1,6 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <div class="platforms">
       <table
         class="gf-table w-100"
         mat-table
@@ -11,42 +10,52 @@
         [dataSource]="dataSource"
       >
         <ng-container matColumnDef="id">
-            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+          <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="d-none d-lg-table-cell px-1"
-              mat-cell
-            >
-              {{ element.id }}
+          <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>
+          <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 d-sm-none mr-1"
+              class="d-inline mr-1"
               [tooltip]="element.name"
               [url]="element.url"
             ></gf-symbol-icon>
             <span>{{ element.name }} </span>
-            </td>
-          </ng-container>
+          </td></ng-container
+        >
 
         <ng-container matColumnDef="url">
-            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+          <th
+            *matHeaderCellDef
+            class="px-1"
+            mat-header-cell
+            mat-sort-header="url"
+          >
             <ng-container i18n>Url</ng-container>
           </th>
-            <td
-              *matCellDef="let element"
-              class="d-none d-lg-table-cell px-1"
-              mat-cell
-            >
+          <td *matCellDef="let element" class="px-1" mat-cell>
             {{ element.url }}
           </td>
         </ng-container>
@@ -86,7 +95,6 @@
       </table>
     </div>
   </div>
-  </div>
 
   <div
     *ngIf="

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;