From c1ff1232270edbebff49dce3d647f0c50dd5613f Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 25 Mar 2024 13:01:04 +0100
Subject: [PATCH 1/2] Set principal class on the name inside admin->users table

---
 app/components/users/row_component.rb                         | 2 +-
 .../shared/components/principal/principal-renderer.service.ts | 1 +
 frontend/src/global_styles/content/_principal.sass            | 4 +---
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/users/row_component.rb b/app/components/users/row_component.rb
index b5a435af947b..f0ce07fb7bef 100644
--- a/app/components/users/row_component.rb
+++ b/app/components/users/row_component.rb
@@ -46,7 +46,7 @@ def row_css_class
     def login
       icon = helpers.avatar user, size: :mini
 
-      link = link_to h(user.login), helpers.allowed_management_user_profile_path(user)
+      link = link_to h(user.login), helpers.allowed_management_user_profile_path(user), class: "op-principal--name"
 
       icon + link
     end
diff --git a/frontend/src/app/shared/components/principal/principal-renderer.service.ts b/frontend/src/app/shared/components/principal/principal-renderer.service.ts
index 7d549530cc62..f0382aacd1e8 100644
--- a/frontend/src/app/shared/components/principal/principal-renderer.service.ts
+++ b/frontend/src/app/shared/components/principal/principal-renderer.service.ts
@@ -151,6 +151,7 @@ export class PrincipalRendererService {
     }
 
     const image = new Image();
+    image.classList.add('op-principal--avatar');
     image.classList.add('op-avatar');
     image.classList.add(`op-avatar_${options.size}`);
     image.src = url;
diff --git a/frontend/src/global_styles/content/_principal.sass b/frontend/src/global_styles/content/_principal.sass
index 46486d24af03..3eb36b5d15f0 100644
--- a/frontend/src/global_styles/content/_principal.sass
+++ b/frontend/src/global_styles/content/_principal.sass
@@ -16,6 +16,7 @@
     flex-grow: 1
     flex-shrink: 1
     min-width: 0 // See: https://css-tricks.com/flexbox-truncated-text/
+    margin-left: $spot-spacing-0_25
 
   &_wrapped &--name
     white-space: normal
@@ -28,6 +29,3 @@
     @media screen and (max-width: $breakpoint-sm)
       &--name
         display: none
-
-  .op-avatar + .op-principal--name
-    margin-left: $spot-spacing-0_5

From 9fbb74646c36b825e43ea75bee6552436b4ab578 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 25 Mar 2024 11:35:40 +0100
Subject: [PATCH 2/2] Use op-principal classes on the Github user to look like
 our principals. Further, the CSS was cleaned up

---
 .../pull-request/pull-request.component.html  | 22 ++++++++++---------
 .../pull-request/pull-request.component.sass  | 16 ++++----------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/modules/github_integration/frontend/module/pull-request/pull-request.component.html b/modules/github_integration/frontend/module/pull-request/pull-request.component.html
index e948823fd289..937b735720c0 100644
--- a/modules/github_integration/frontend/module/pull-request/pull-request.component.html
+++ b/modules/github_integration/frontend/module/pull-request/pull-request.component.html
@@ -12,19 +12,21 @@
 
 <div class="op-pull-request--info">
   {{ text.label_created_by }}
-  <img
-    *ngIf="pullRequest._embedded.githubUser"
-    alt='PR author avatar'
-    class='op-pull-request--avatar op-avatar op-avatar_mini'
-    [src]="pullRequest._embedded.githubUser.avatarUrl"
-  />
-  <span class='op-pull-request--user'>
+
+  <div class="op-principal"
+       *ngIf="pullRequest._embedded.githubUser">
+    <img
+      alt='PR author avatar'
+      class='op-pull-request--avatar op-avatar op-avatar_mini op-principal--avatar'
+      [src]="pullRequest._embedded.githubUser.avatarUrl"
+    />
     <a
-      *ngIf="pullRequest._embedded.githubUser"
       [href]="pullRequest._embedded.githubUser.htmlUrl"
       [textContent]="pullRequest._embedded.githubUser.login"
-    ></a>.
-  </span>
+      class="op-principal--name"
+    ></a>
+  </div>
+  .
 
   <span class='op-pull-request--date'>
     {{ text.label_last_updated_on }}
diff --git a/modules/github_integration/frontend/module/pull-request/pull-request.component.sass b/modules/github_integration/frontend/module/pull-request/pull-request.component.sass
index 15fe43d4183c..23b75622f4dd 100644
--- a/modules/github_integration/frontend/module/pull-request/pull-request.component.sass
+++ b/modules/github_integration/frontend/module/pull-request/pull-request.component.sass
@@ -33,6 +33,7 @@
   display: grid
   grid-template-columns: auto 1fr auto auto
   grid-template-areas: "link link link link" "title title title state" "info info info info" "checks-label checks-label checks-label checks-label" "checks checks checks checks"
+  align-items: center
   margin-bottom: 11px
   padding-bottom: 11px
   border-bottom: 1px solid #dddddd
@@ -48,26 +49,18 @@
     line-height: 32px
     margin-right: 20px
 
-  &--avatar
-    grid-area: info
-
   &--info
-    display: block
-    grid-area: info
-    margin-bottom: 3px
-    font-size: 0.9rem
+    display: inline-flex
     grid-area: info
     color: var(--color-fg-muted)
-    // The mini avatar is much higher than the text line. Compensate it.
-    margin-top: -4px
 
+  &--avatar,
   &--date
-    grid-area: info
+    margin-left: 0.25rem
 
   &--link
     grid-area: link
     margin-top: 6px
-    font-size: 0.9rem
 
   &--state
     grid-area: state
@@ -75,7 +68,6 @@
   &--checks-label
     grid-area: checks-label
     margin-top: 12px
-    font-size: 0.9rem
     font-weight: var(--base-text-weight-bold)
 
   &--checks