From 9f45227d4101af056c92acfa9180d1a26c38be09 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 9 Jul 2026 15:51:20 -0600
Subject: [PATCH] PD-3625 Align visibility icon with the name value, not the
 label

Addresses review feedback: the icon was centering against the whole
label+value block, so it sat between the two lines instead of level
with the bold name. Moves the caption label outside the icon's flex
row so the row only ever contains the value (published name, or the
given/family name when there's no published name) - this also makes
the icon centre correctly when a long name wraps onto several lines.
Also promotes the given/family name to the H1 $body-large style when
there's no published name, per feedback.
---
 .../components/top-bar/top-bar.component.html | 25 ++++++++++++-------
 .../components/top-bar/top-bar.component.scss | 10 +++++---
 2 files changed, 22 insertions(+), 13 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 9dc167384..ff0c88ec6 100644
--- a/src/app/record/components/top-bar/top-bar.component.html
+++ b/src/app/record/components/top-bar/top-bar.component.html
@@ -138,24 +138,31 @@ <h2 header class="names-header orc-font-body" i18n="@@topBar.names">
         Names
       </h2>
       <app-panel-data [deprecatedPadding]="true">
+        <ng-container *ngIf="creditName; else nameAsPrimaryLabel">
+          <span i18n="@@topBar.publishedName" class="mat-caption description">
+            Published Name
+          </span>
+        </ng-container>
+        <ng-template #nameAsPrimaryLabel>
+          <span i18n="@@topBar.name" class="mat-caption description">
+            Name
+          </span>
+        </ng-template>
         <app-panel-element
           [visibility]="userRecord.names.visibility.visibility"
         >
-          <ng-container *ngIf="creditName">
-            <span i18n="@@topBar.publishedName" class="mat-caption description">
-              Published Name
-            </span>
-            <h1 class="published-name" id="publishedName">
-              {{ creditName }}
-            </h1>
-          </ng-container>
+          <h1 class="published-name" id="publishedName">
+            {{ creditName || (givenNames + ' ' + familyName) }}
+          </h1>
+        </app-panel-element>
+        <ng-container *ngIf="creditName">
           <span i18n="@@topBar.name" class="mat-caption description">
             Name
           </span>
           <div id="givenAndFamilyNames" class="mat-subtitle-2 name-value">
             {{ givenNames + ' ' + familyName }}
           </div>
-        </app-panel-element>
+        </ng-container>
         <ng-container *ngIf="userRecord?.otherNames?.otherNames?.length > 0">
           <div class="other-names-container">
             <span i18n="@@topBar.alsoKnowAs" class="mat-caption description">
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 bb8649e36..7e245f9f3 100644
--- a/src/app/record/components/top-bar/top-bar.component.scss
+++ b/src/app/record/components/top-bar/top-bar.component.scss
@@ -45,10 +45,12 @@ app-panel {
   }
 
   // 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.
+  // the block it belongs to instead of the default flex `stretch`. The
+  // caption label above each value lives outside `app-panel-element` (see
+  // template), so `.line` here is always just the value itself and this
+  // centres correctly whether it's one line or wraps onto several.
+  // `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;
   }