From 83006a05fe028cda05773843f69cede85f37e798 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Tue, 7 Jul 2026 16:53:18 -0600
Subject: [PATCH] PD-3625 Fix spacing, alignment and typography in Names panel

Restructures the published name markup so the label sits outside the
<h1> instead of nested inside it with a redundant <p> (also fixes
PD-2475's mis-coloured label), restores the label-to-value spacing
that a dead CSS selector was silently dropping, centers the
visibility icon against its full text block instead of the top line,
and applies the $body-large (18px/24px bold) and 14px bold styles
called for in the Figma redlines.
---
 .../components/top-bar/top-bar.component.html | 15 ++++---
 .../components/top-bar/top-bar.component.scss | 39 ++++++++++++++++---
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/app/record/components/top-bar/top-bar.component.html b/src/app/record/components/top-bar/top-bar.component.html
index 2c6eb3a13b..0174c2c85f 100644
--- a/src/app/record/components/top-bar/top-bar.component.html
+++ b/src/app/record/components/top-bar/top-bar.component.html
@@ -141,18 +141,21 @@ <h2 header class="names-header orc-font-body" i18n="@@topBar.names">
         <app-panel-element
           [visibility]="userRecord.names.visibility.visibility"
         >
-          <h1 class="name" *ngIf="creditName">
-            <span i18n="@@topBar.publishedName" class="mat-caption">
+          <ng-container *ngIf="creditName">
+            <span
+              i18n="@@topBar.publishedName"
+              class="mat-caption description"
+            >
               Published Name
             </span>
-            <p class="mat-card-title published-name" id="publishedName">
+            <h1 class="published-name" id="publishedName">
               {{ creditName }}
-            </p>
-          </h1>
+            </h1>
+          </ng-container>
           <span i18n="@@topBar.name" class="mat-caption description">
             Name
           </span>
-          <div id="givenAndFamilyNames" class="mat-subtitle-2">
+          <div id="givenAndFamilyNames" class="mat-subtitle-2 name-value">
             {{ givenNames + ' ' + familyName }}
           </div>
         </app-panel-element>
diff --git a/src/app/record/components/top-bar/top-bar.component.scss b/src/app/record/components/top-bar/top-bar.component.scss
index b1d1e1ba06..bb8649e36c 100644
--- a/src/app/record/components/top-bar/top-bar.component.scss
+++ b/src/app/record/components/top-bar/top-bar.component.scss
@@ -11,22 +11,51 @@ app-panel {
   width: 100%;
   margin-top: 16px;
 
-  .name,
   p {
-    margin-top: 0;
+    margin: 0;
   }
 
-  p .published-name {
-    margin-bottom: 18px;
+  .mat-caption.description {
+    display: block;
+    margin: 16px 0 8px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .published-name {
+    margin: 0;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: bold;
+  }
+
+  .name-value {
+    margin: 0;
+    font-weight: bold;
   }
 
   .other-names-container {
-    margin-top: 18px;
+    margin-top: 16px;
 
     .other-names {
       margin-bottom: 0;
     }
   }
+
+  // Scoped to the names panel only: centre the visibility icon against
+  // the block it belongs to instead of the default flex `stretch`, so it
+  // stays aligned when the block wraps published name + name onto several
+  // lines. `app-panel-element` is shared by other panels, so this is kept
+  // local rather than changed at the source.
+  ::ng-deep .row-with-privacy {
+    align-items: center;
+  }
+
+  ::ng-deep app-panel-privacy {
+    margin-top: 0;
+  }
 }
 
 app-top-bar-actions {