[#69596] Use wrapper div for hover card blueprint

Author: EinLama

app/components/portfolios/details_component.sass

@@ -51,3 +51,6 @@ $status_not-set: var(--progressBar-track-bgColor) // invisible background color
     @media screen and (max-width: $breakpoint-sm)
       margin-top: var(--base-size-16, 1rem)
       margin-bottom: var(--base-size-16, 1rem) !important
+
+.op-hover-card:has(.op-portfolios--popover)
+  width: fit-content

frontend/src/stimulus/controllers/hover-card-trigger.controller.ts

@@ -315,12 +315,13 @@ export default class HoverCardTriggerController extends ApplicationController {
   }
 
   private popoverFromTemplate(overlay:HTMLElement, template:HTMLTemplateElement):HTMLElement {
-    const popoverFragment = template.content.cloneNode(true) as DocumentFragment;
+    const popover = document.createElement('div');
+    this.setPopoverAttributes(popover);
 
-    overlay.appendChild(popoverFragment);
+    const popoverFragment = template.content.cloneNode(true) as DocumentFragment;
+    popover.appendChild(popoverFragment);
 
-    const popover = overlay.children[0] as HTMLElement;
-    this.setPopoverAttributes(popover);
+    overlay.appendChild(popover);
 
     return popover;
   }