PD-3625 Align visibility icon with the name value, not the label

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">

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;
   }