HParams: Change strategy for positioning context menus (#6470)

## Motivation for features / changes
We have been creating context menus using our custom modal component.
The custom modal component had the height of the header hard coded as a
vertical offset, however, the header is not the same height in internal
tensorboard so the offset needs to be set programatically.

## Screenshots of UI changes (or N/A)
In OSS

![image](https://github.com/tensorflow/tensorboard/assets/78179109/f52aad36-30bc-453f-88c8-7630d00e1495)

In Internal

![image](https://github.com/tensorflow/tensorboard/assets/78179109/30ac0f78-99bb-4dbb-9484-5fbcdf839b32)

Author: rileyajones

tensorboard/webapp/widgets/custom_modal/custom_modal_component.ts

@@ -20,6 +20,7 @@ import {
   ElementRef,
   HostListener,
   OnInit,
+  ViewContainerRef,
 } from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 
@@ -40,7 +41,6 @@ export interface ModalContent {
     `
       :host {
         position: fixed;
-        top: -64px; /* The height of the top bar */
         left: 0;
         z-index: 9001;
       }
@@ -62,6 +62,8 @@ export class CustomModalComponent implements OnInit {
 
   private clickListener: () => void = this.close.bind(this);
 
+  constructor(private readonly viewRef: ViewContainerRef) {}
+
   ngOnInit() {
     this.visible$.subscribe((visible) => {
       // Wait until after the next browser frame.
@@ -76,6 +78,12 @@ export class CustomModalComponent implements OnInit {
   }
 
   public openAtPosition(position: {x: number; y: number}) {
+    const root = this.viewRef.element.nativeElement;
+    const top = root.getBoundingClientRect().top;
+    if (top !== 0) {
+      root.style.top = top * -1 + root.offsetTop + 'px';
+    }
+
     this.content.nativeElement.style.left = position.x + 'px';
     this.content.nativeElement.style.top = position.y + 'px';
     this.visible$.next(true);