From c0566d8f590e370993f54d476a338b121050cb0f Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 17 Jul 2023 18:10:19 +0700
Subject: [PATCH] fix: Add missing vertical align in professional activities
 panel and limit width panel title

---
 .../affiliation-stack.component.html          | 27 ++++++++++---------
 .../affiliation-stack.component.scss          |  8 ++++++
 ...ffiliation-stack.component.scss-theme.scss |  6 +++++
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.html b/src/app/record/components/affiliation-stack/affiliation-stack.component.html
index 31fec131e8..c7ee3a32e3 100644
--- a/src/app/record/components/affiliation-stack/affiliation-stack.component.html
+++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.html
@@ -29,7 +29,7 @@
     id="{{ 'cy-affiliation-' + type + '-' + i }}"
     [panelTitle]="affiliation.affiliationName.value"
   >
-    <h4 header class="affiliation-title orc-font-body">
+    <div class="affiliation-title" header>
       <ng-container *ngIf="professionalActivitiesTogglz">
         <mat-icon
           class="material-icons-outlined"
@@ -45,19 +45,22 @@ <h4 header class="affiliation-title orc-font-body">
         <mat-icon class="material-icons-outlined" *ngIf="type === 'service'"
           >badge</mat-icon
         >
+        <div class="vl"></div>
       </ng-container>
-      {{ affiliation.affiliationName.value }}:
+      <h4 class="orc-font-body">
+        {{ affiliation.affiliationName.value }}:
 
-      <ng-container *ngIf="affiliation.city.value">
-        {{ affiliation.city.value }},
-      </ng-container>
-      <ng-container *ngIf="affiliation.region.value">
-        {{ affiliation.region.value }},
-      </ng-container>
-      <ng-container *ngIf="affiliation.country.value">
-        {{ affiliation.country.value }}
-      </ng-container>
-    </h4>
+        <ng-container *ngIf="affiliation.city.value">
+          {{ affiliation.city.value }},
+        </ng-container>
+        <ng-container *ngIf="affiliation.region.value">
+          {{ affiliation.region.value }},
+        </ng-container>
+        <ng-container *ngIf="affiliation.country.value">
+          {{ affiliation.country.value }}
+        </ng-container>
+      </h4>
+    </div>
     <!-- AFFILIATION BODY -->
     <app-affiliation
       *ngIf="stackPanelsDisplay[affiliation.putCode.value].topPanelOfTheStack"
diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
index 1c95a60d23..6bf3ff44fc 100644
--- a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
+++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
@@ -22,7 +22,15 @@
   display: flex;
   align-items: center;
   margin: 0;
+  h4 {
+    max-width: calc(100% - 50px);
+  }
   mat-icon {
     margin-inline-end: 4px;
   }
+  .vl {
+    height: 28px;
+    margin-inline-start: 8px;
+    margin-inline-end: 12px;
+  }
 }
diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss-theme.scss b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss-theme.scss
index 278bcaa344..82babbe3f5 100644
--- a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss-theme.scss
+++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss-theme.scss
@@ -22,6 +22,12 @@
         mat.get-color-from-palette($background, panel-shadow);
     }
   }
+  .vl {
+    border-left: 2px solid mat.get-color-from-palette(
+        $background,
+        ui-background
+    );
+  }
 }
 
 @include affiliation-stack-theme($orcid-app-theme);