Feature/Improve user interface of access table (#2821)

* Improve alignment

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Improved the user interface of the access table to share the portfolio
+
 ## 2.34.0 - 2024-01-02
 
 ### Added

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

@@ -16,24 +16,24 @@
   <ng-container matColumnDef="type">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
     <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-      <ng-container>
+      <div class="align-items-center d-flex">
-        <ion-icon class="mr-1" name="lock-closed-outline"></ion-icon>
+        <ion-icon class="mr-1" name="lock-closed-outline" />
-        Restricted View
+        <ng-container i18n>Restricted View</ng-container>
-      </ng-container>
+      </div>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="details">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
     <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-      <ng-container *ngIf="element.type === 'PUBLIC'">
+      <div *ngIf="element.type === 'PUBLIC'" class="align-items-center d-flex">
         <ion-icon class="mr-1" name="link-outline"></ion-icon>
         <a
           href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
           target="_blank"
           >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
         >
-      </ng-container>
+      </div>
     </td>
   </ng-container>