From 5cb2ec6411e91703978acc591e6abcb36cb464ef Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 3 Jan 2024 21:08:35 +0100
Subject: [PATCH] Feature/Improve user interface of access table (#2821)

* Improve alignment

* Update changelog
---
 CHANGELOG.md                                         |  6 ++++++
 .../access-table/access-table.component.html         | 12 ++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05ab8d208..8017e3d0e 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index e9138717d..761bce9f9 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/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>
-        <ion-icon class="mr-1" name="lock-closed-outline"></ion-icon>
-        Restricted View
-      </ng-container>
+      <div class="align-items-center d-flex">
+        <ion-icon class="mr-1" name="lock-closed-outline" />
+        <ng-container i18n>Restricted View</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>