Code maintenance/69596 improve static hover cards by using templates

[EinLama]

Ticket

https://community.openproject.org/wp/69596

• Wait for Bug/69365 sub item status hover card misses animation #21279 to be merged first.

Refactors hover cards to make use of HTML template elements. This conveys the correct semantic meaning, since an existing DOM element is copied and rendered in a different location -> exactly what a template should do.

This elegant change additionally allowed us to streamline the behavior of the HoverCardTriggerController for both async and sync hover cards.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[Copilot]

Pull request overview

This PR refactors static hover cards to use semantic HTML <template> elements instead of hidden DOM containers. The change improves code semantics (templates are designed for content that should be instantiated elsewhere), eliminates the need for custom CSS hiding logic, and streamlines the HoverCardTriggerController to handle both asynchronous (Turbo Frame) and synchronous (template-based) hover cards uniformly.

Key Changes:

• Replaced hidden DOM element pattern with <template> elements for static hover card content
• Removed the op-hover-card--hidden-container CSS class (no longer needed since templates are inherently hidden)
• Simplified controller logic by using template.content.cloneNode() instead of element cloning with ID removal

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
lookbook/docs/components/hover-cards.md.erb	Updated documentation to reflect the new template-based pattern, including corrected examples and clarified behavior around ID usage
frontend/src/stimulus/controllers/hover-card-trigger.controller.ts	Refactored to expect HTMLTemplateElement instead of HTMLElement, using template content cloning for cleaner instantiation
frontend/src/global_styles/content/_hover_cards.sass	Removed obsolete op-hover-card--hidden-container CSS class definition
app/components/portfolios/details_component.html.erb	Migrated from hidden div container to <template> element, moving ID from inner content to template itself
app/components/portfolios/details_component.sass	Added width constraint for portfolio hover cards using :has() selector

[toy]

Small points primarily about using elements except template.

Not related to this PR, but I'm also wondering about animation, if it is beneficial overall (maybe more when loading remote content), if it can be faster (subjectively .25s feels like a slow appearance, while .1s as just not popping it right away) and, why no animation when hiding the popover (animating popovers can be interesting)?

[EinLama]

They there @toy

Thank you for the review. It took a long while, but I managed to finally get back to this PR and address all of your feedback 🎉

In the meantime, two new template hover cards were added for project attributes, I updated them accordingly.

[EinLama]

Small points primarily about using elements except template.

Not related to this PR, but I'm also wondering about animation, if it is beneficial overall (maybe more when loading remote content), if it can be faster (subjectively .25s feels like a slow appearance, while .1s as just not popping it right away) and, why no animation when hiding the popover (animating popovers can be interesting)?

That is a valid point. The current solution was quickly added at the time and could be improved. I have created another code maintenance ticket for that.

[myabc]

Did a very quick code review. This looks very good!

[toy]

Just few nitpicks