Merge pull request #15098 from opf/bug/50213-missing-space-between-av…

…atars-and-usernames-in-administration- [50213][46215] Missing space between avatars and usernames
opf · Mar 25, 2024 · 9a2153a · 9a2153a
2 parents b33b8eb + 9fbb746
commit 9a2153a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
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
@@ -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
@@ -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,34 +49,25 @@
     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
 
   &--checks-label
     grid-area: checks-label
     margin-top: 12px
-    font-size: 0.9rem
     font-weight: var(--base-text-weight-bold)
 
   &--checks